Antd:AutoComplete数据化配置选项内容

应用：实现一个搜索下拉框

实现效果：

示例地址：# AutoComplete自动完成 原始数据源使用方法：

 
const options = [
  {value: '张三'},
  {value: '李四'},
  {value: '王五'}
]
<AutoComplete
  options={options}
  onSelect={onSelect}
  onSearch={onSearch}
  onChange={() => setKw(prevState => {return {...prevState,isFull:false}})}
  placeholder="张三"
/>

当得到后端数据后，报错（意思是只能有value不能有其他参数属性）： 后端所给数据源大致如下：

 
[
  {
  id: 1,
  name: '张三',
  age: '22',
  sex: '男',
  value: '张三'
  },
  {
  id: 2,
  name: '李四',
  age: '18',
  sex: '男',
  value: '李四'
  },
  {
  id: 3,
  name: '露丝',
  age: '25',
  sex: '女',
  value: '露丝'
  }
]

解决思路一：创建一个数组构造option，再创造一个以name为key的对象，当Select时得到value，再从对象中取该name对应的对象。

解决思路二：直接传 AutoComplete.Option 作为 AutoComplete 的 children，而非使用 options

修改代码如下：

<AutoComplete onSearch={onSearch} onSelect={onSelect} placeholder="张三">
  {options.map((item: any) => {
    return <Option value={item.name} key={item.id} data-item={item}>{item.name}</Option>
  })}
</AutoComplete>

通过这个写法，点击item项的时候可以得到其他的属性。