antdesign 选择器搜索文本控制

Ant Design 的 Select 组件是一个强大的下拉选择框组件，它支持丰富的功能，包括搜索文本控制。当你需要用户从一组选项中通过输入关键字进行筛选时，可以启用 Select 的 `filterOption` 和 `optionFilterProp` 属性。

- `filterOption`：这是一个布尔属性，默认为 true，当设置为 true 时，Select 将实时过滤匹配用户输入的关键字的选项。
- `optionFilterProp`：这是字符串属性，用于指定应该在哪个选项属性上进行搜索，例如，如果想基于 `name` 属性搜索，可以设置为 `'name'`。

基本使用示例：

import { Select } from 'antd';
const Option = Select.Option;

const App = () => {
  const [value, setValue] = React.useState('');
  const filteredOptions = ['Apple', 'Banana', 'Cherry'].filter(option =>
    option.toLowerCase().includes(value.toLowerCase()),
  );

  return (
    <Select
      placeholder="请选择"
      filterOption={(input, option) =>
        option.props.children.toLowerCase().indexOf(input.toLowerCase()) > -1
      }
      options={filteredOptions}
      value={value}
      onChange={setValue}
    />
  );
};

在这个例子中，用户输入时会选择列表中包含该关键字的选项。