antd带搜索功能的下拉框

antd的Select组件可以实现带搜索功能的下拉框，使用方法如下：

1. 引入Select组件

import { Select } from 'antd';

2. 定义数据源

const { Option } = Select;
const data = [
  { value: 'apple', label: '苹果' },
  { value: 'banana', label: '香蕉' },
  { value: 'orange', label: '橙子' },
  { value: 'pear', label: '梨子' },
];

3. 渲染Select组件

<Select
  showSearch
  style={{ width: 200 }}
  placeholder="请选择"
  optionFilterProp="children"
  filterOption={(input, option) =>
    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  }
>
  {data.map((item) => (
    <Option value={item.value} key={item.value}>
      {item.label}
    </Option>
  ))}
</Select>

其中，showSearch属性表示开启搜索功能，optionFilterProp属性表示搜索时根据哪个属性过滤，filterOption属性表示过滤方法，这里使用了模糊匹配。