react 使用antd 做类似百度搜索框的模糊搜索

使用Antd的AutoComplete组件可以实现类似百度搜索框的模糊搜索。

首先，你需要在React组件中导入Antd的AutoComplete组件和Option组件。

import { AutoComplete, Option } from 'antd';

然后，你需要定义一个包含所有选项的数组。这些选项将在AutoComplete组件中呈现。

const options = [
  'React',
  'Vue',
  'Angular',
  'Ember',
  'Backbone',
  'Knockout',
  'Meteor',
  'Aurelia',
  'Cycle',
  'Mithril',
];

接下来，你需要定义一个状态变量，用于存储用户输入的值。

const [value, setValue] = useState('');

最后，你可以在React组件中渲染AutoComplete组件。

<AutoComplete
  value={value}
  onChange={setValue}
  placeholder="Search"
  style={{ width: 200 }}
>
  {options.map((option) => (
    <Option key={option} value={option}>
      {option}
    </Option>
  ))}
</AutoComplete>

这样就可以实现一个类似百度搜索框的模糊搜索功能。用户输入的值会与选项中的值进行匹配，并在下拉列表中呈现匹配的结果。