React使用Antd组件库的Select模糊查询多个值_antd select模糊搜索-优快云博客

文章介绍了如何在ReactSelect组件中，通过官方文档提供的optionFilterProp属性进行升级，支持文字和拼音首字母的模糊查询，展示了将optionFilterProp值从children改为label的具体实现过程。

用官方文档的测试样式调试

test: [
  { name: '小明明', pinyin: 'xmm' },
  { name: '大红红', pinyin: 'dhh' },
  { name: '王超超', pinyin: 'wcc' },
  { name: '朱达达', pinyin: 'zdd' },
  { name: '陈丽丽', pinyin: 'cll' },
]

<Select
  showSearch
  style={{ width: 200 }}
  optionFilterProp="children"
>
  {
    test.map((item: any) => (
      <Option value={item.pinyin} >{item.name}</Option>
    ))
  }
</Select>

页面效果

模糊查询效果

这时候，如果需求要求：不但要支持文字模糊查询，还要支持拼音首字母模糊查询

我们就需要通过两个模糊查询条件去操作

实现方法：

首先，我们通过官方文档可以看到，控制模糊查询条件的属性是optionFilterProp

而optionFilterProp除了文档中写明的option 和 children 两个属性值以外，还有一个 label 的属性值

这时候我们吧的属性值改为 label

改完代码

<Select
  showSearch
  style={{ width: 200 }}
  optionFilterProp="label"
>
  {
    test.map((item: any) => (
      <Option value={item.pinyin} label={item.pinyin + item.name}>{item.name}</Option>
    ))
  }
</Select>