If I have a user object with a display name (e.g. "John Smith") and a username (e.g. "johsmi"), how can I search for both display name and username?
This example will only search for usernames, i.e. it will find "johsmi", but not "Smith":
<Select
showSearch={true}
optionFilterProp="children"
placeholder="Select account"
>
{users.map(user => (
<Select.Option value={user.name}>
{user.displayName}
</Select.Option>
))}
</Select>
I ended up adding the display name in the key attribute to make it searchable, but I wonder if it's the recommended way of doing it:
<Select.Option key={user.displayName} value={user.name}>
{user.displayName}
</Select.Option>
You can use the filterOption
props
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>
Exemple: https://codesandbox.io/s/brave-bhabha-m5tuy
Works best for me, refer this issue
<Select
allowClear
showSearch
filterOption={(inputValue, option) =>
option.children.join('').toLowerCase().includes(inputValue.toLowerCase())
}
>
{options.map(option=> (
<Option key={option.id}>{option.name}</Option>
))}
</Select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With