用官方文档的测试样式调试
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>