蚂蚁设计 - 在选择中搜索键和值

Question

如果我有一个具有显示名称(例如"John Smith"(和用户名(例如"johsmi"(的用户对象，如何搜索显示名称和用户名？

这个例子只会搜索用户名，即它会找到"johsmi"，而不是"Smith"：

<Select
showSearch={true}
optionFilterProp="children"
placeholder="Select account"
>
{users.map(user => (
<Select.Option value={user.name}>
{user.displayName}                        
</Select.Option>
))}
</Select>

我最终在 key 属性中添加了显示名称以使其可搜索，但我想知道这是否是推荐的方法：

<Select.Option key={user.displayName} value={user.name}>
{user.displayName}                        
</Select.Option>

Answer 1

您可以使用filterOption道具

const person = [{
username: 'jstuart123',
displayName: 'John Stuart'
}]
<Select
showSearch
optionFilterProp="children"
onSearch={onSearch}
filterOption={(input, option) =>  
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 
|| option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{person.map(p => <Option value={p.username}>{p.displayName}</Option>)}
</Select>

示例：https://codesandbox.io/s/brave-bhabha-m5tuy

Answer 2

最适合我，请参阅此问题

<Select
allowClear
showSearch
filterOption={(inputValue, option) =>
option.children.join('').toLowerCase().includes(inputValue.toLowerCase())
}
>
{options.map(option=> (
<Option key={option.id}>{option.name}</Option>
))}
</Select>

Answer 3

试试这个：

filterOption={(input, option) =>
option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

Answer 4

当我尝试上面的答案时，我也遇到了一个错误。其实我是这样解决的。

filterOption={(input, option) =>
option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

Answer 5

对于 AntD 的第4.8.2版，设置optionFilterProp="children"没有任何效果。我完全不清楚该属性的作用是什么，以及魔术字符串"children"代表什么(例如，它是否具有通常的 React 含义？如果是，它指的是谁组件的子组件？dunno(。

就我而言，我所需要的只是showSearch和filterOptions。此外，我的filterOptions必须与其他答案完全不同的定义(这对我不起作用(：

filterOption=(input, option)=>
option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0

Answer 6

// add the "filterOption" props to the ant design Select component
filterOption={(input, option) =>
// make sure that the value and key is not null 
option.props.value !== null
&& toLower(option.props.value).includes(toLower(input))
||
option.props.key !== null
&&
toLower(option.props.key).includes(toLower(input))
}

// here is what the "toLower" function looks like just to convert string to lower case
toLower = (value) => {
return value.toLowerCase()
}

Answer 7

试试这个：

filterOption={(input, option) =>
option.children.join("").toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 
}