Ant Design Pro AutoComplete 组件同时支持下拉选择及自定义输入

AutoComplete: 支持输入的 ant design select 组件

参考：

https://ant-design.antgroup.com/components/auto-complete-cn

实际上，我需要的并不是一个 select 组件，而是一个自动补全组件。

因为，select 组件并不支持自定义输入。而 AutoComplete 组件完美契合需求。

其数据结构是：

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

是否可以默认展开选型列表：

• defaultOpen 是否默认展开下拉菜单 boolean
  
• open 是否展开下拉菜单 boolean
  
• onFocus 获得焦点时的回调 function()
  

需要测试一下 defaultOpen 的效果。

<Form.Item name="User" label="开发者" rules={[{ required: true }]}>
  <AutoComplete options={itemUsers} />
</Form.Item>

直接这样使用即可，不需要设置 defaultOpen 就能自动展开，非常方便。
可能是后台一次性拉取了所有数据的缘故。

golang gin 提供后台数据接口

例如，从 MySQL 数据表中将某列 distinct 数据查询出来。

struct 数据结构需要对应前端 AutoComplete 组件的 options 结构

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

gin 接口代码：

// 接口返回 Item 数据表中 user 字段 distinct 的所有值
// 返回的 data 是一个数组，每个 item 是一个 {value: string} 的对象
func GetItemUsers(c *gin.Context) {
	var items []models.Item
	db := models.DB.Model(&models.Item{})
	db.Select("user").
		Group("user").
		Find(&items)

	// 转换为 {value: string} 的对象
	var options []distinctOption
	for _, item := range items {
		options = append(options, distinctOption{Value: item.User})
	}

	c.JSON(http.StatusOK, gin.H{
		"success": true,
		"data":    options,
	})
}

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式