Revision history [back]

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.