Yes, it is possible to search for both key and value in a select using Ant Design.
You can use the filterOption
property of Ant Design's <Select>
component to customize the filtering behavior. The filterOption
function takes two arguments: the current option and the search input.
Here is an example implementation of filterOption
that searches for matches in both the key and value of the options:
const options = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
{ label: 'Option 4', value: '4' },
];
function filterOption(inputValue, option) {
const { label, value } = option;
return (
label.toLowerCase().includes(inputValue.toLowerCase()) ||
value.toString().toLowerCase().includes(inputValue.toLowerCase())
);
}
function MySelect() {
return (
<Select
showSearch
filterOption={filterOption}
options={options}
/>
);
}
In this example, the filterOption
function checks if the input value matches any part of the label or value of the option, regardless of whether it is the key or value of the option. The function returns true
if there is a match, and false
otherwise.
Pass the filterOption
function as a prop to the <Select>
component, and set the showSearch
prop to true
to enable the search input field.
Asked: 2023-06-15 12:42:04 +0000
Seen: 15 times
Last updated: Jun 15 '23