Thành phần AutoComplete của Ant Design Pro hỗ trợ lựa chọn từ danh sách thả xuống và nhập liệu tùy chỉnh

Ngày cập nhật: 17-10-2024 Lượt xem: 923 Số từ: 368 Danh mục: ReactJS
Tìm kiếm

Trên thực tế, tôi cần một thành phần tự động gợi ý thay vì là một thành phần select thông thường. Lý do là bởi vì thành phần select không cho phép người dùng nhập dữ liệu tùy ý, trong khi AutoComplete lại hoàn hảo với yêu cầu này. Cấu trúc dữ liệu được sử dụng như sau:

1
2
3
4
5

const options = [
 { value: 'name1' },
 { value: 'name2' },
 { value: 'name3' },
];

Câu hỏi đặt ra là: Liệu có thể hiển thị danh sách lựa chọn mặc định hay không?
Dưới đây là các thuộc tính liên quan:

• defaultOpen: Xác định liệu menu thả xuống có nên mở ngay từ đầu hay không (kiểu boolean)
• open: Trạng thái xác định menu thả xuống có đang mở hay không (kiểu boolean)
• onFocus: Hàm xử lý sự kiện khi thành phần nhận được focus

Tôi đã thử nghiệm thuộc tính defaultOpen để kiểm tra hiệu ứng của nó. Tuy nhiên, khi sử dụng đoạn code dưới đây:

1
2
3

<Form.Item name="User" label="Người phát triển" rules={[{ required: true }]}>
 <AutoComplete options={itemUsers} />
</Form.Item>

Không cần thiết phải cấu hình defaultOpen, danh sách vẫn tự động mở ra một cách dễ dàng. Điều này có thể là do dữ liệu đã được tải đầy đủ từ phía server.

Golang Gin cung cấp API backend

Ví dụ, truy vấn dữ liệu duy nhất (distinct) từ một cột trong bảng MySQL.
Kết cấu struct ở phía backend cần khớp với định dạng dữ liệu mà frontend AutoComplete mong đợi.

1
2
3

type distinctOption struct {
  Value string `json:"value"`
}

Mã nguồn API bằng Gin:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// Hàm trả về danh sách giá trị duy nhất của trường "user" trong bảng Item
// Dữ liệu trả về là một mảng chứa các đối tượng có cấu trúc {value: string}
func GetItemUsers(c *gin.Context) {
  var items []models.Item
  db := models.DB.Model(&models.Item{})
  db.Select("user").
    Group("user").
    Find(&items)
  // Chuyển đổi sang kiểu dữ liệu phù hợp với frontend
  var options []distinctOption
  for _, item := range items {
    options = append(options, distinctOption{Value: item.User})
  }
  c.JSON(http.StatusOK, gin.H{
    "success": true,
    "data":  options,
  })
}

Như vậy, việc kết nối giữa frontend sử dụng Ant Design Pro và backend dựa trên Golang đã được thực hiện một cách hiệu quả và linh hoạt.