react-ant-design-component-autocomplete

介绍

今天我们一起来学习一下Ant Design（简称AntD）中的AutoComplete组件。AutoComplete组件是一个非常实用的输入框组件，它可以根据用户输入的内容，动态地显示匹配的选项，提升用户体验。为什么要学习这个组件呢？因为我之前一直没有使用过它，而且总是将这个组件和Select组件搞混，一直以为他们干的是一件事，今天就测底解决这个疑惑。

首先上结论，看看AutoComplete和Select的区别：

AutoComplete：主要用于输入和选择，用户可以输入部分内容，组件会根据输入内容动态显示匹配的选项。
Select：主要用于选择，用户只能从下拉列表中选择一个选项，不能输入其他内容（除非定制Select的行为）。

也就是说Select组件是在一组固定的值中选择一个，而AutoComplete组件则是可以输入内容并从动态生成的选项中选择。AutoComplete的作用主要是做辅助输入。

如果大家不明白AutoComplete是如何工作的，可以尝试去百度、必应或者谷歌等搜索引擎随便搜点东西，当我们在搜索框中输入内容时，搜索引擎会根据我们输入的内容，动态地显示匹配的搜索建议，这就是AutoComplete的典型应用场景。

如何使用AutoComplete组件

下面是一个输入邮箱的例子，当用户输入邮箱前缀时，组件会动态显示匹配的邮箱地址后缀。使用AutoComplete组件非常简单，一般都是相应onSearch事件，然后根据输入的值动态生成选项。

在下面的代码中，我们定义了一个handleSearch函数，当用户输入内容时，这个函数会被调用。我们根据输入的值动态生成选项，并通过setOptions函数将这些选项传递给AutoComplete组件。

import React from 'react';
import { AutoComplete } from 'antd';
import type { AutoCompleteProps } from 'antd';

const App: React.FC = () => {
  const [options, setOptions] = React.useState<AutoCompleteProps['options']>([]);

  const handleSearch = (value: string) => {
    setOptions(() => {
      if (!value || value.includes('@')) {
        return [];
      }

      return ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
        label: `${value}@${domain}`,
        value: `${value}@${domain}`,
      }));
    });
  };

  return (
    <AutoComplete
      style={{ width: 200 }}
      onSearch={handleSearch}
      placeholder="input here"
      options={options}
    />
  );
};

export default App;

大小写无关的搜索

如果要实现大小写无关的搜索，可以响应filterOption方法。

<AutoComplete
  style={{ width: 200 }}
  onSearch={handleSearch}
  placeholder="input here"
  options={options}
  filterOption={(inputValue, option) =>
    option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
  }
/>

典型的应用场景

搜索建议，如搜索引擎的搜索框。
表单输入，比如要填写邮箱地址时，我们可以将常见的邮箱地址后缀（如@gmail.com, @yahoo.com等）作为选项，用户输入邮箱前缀时，组件会动态显示匹配的邮箱地址后缀。

总之，AutoComplete组件的核心作用是输入提示，在选项不固定的时候非常有用。