今天就来给大家讲一下Antd的 AutoComplete组件

大家在工作中，肯定有遇到过，需求要求可以下拉选择，又能输入新的数据的情况。
仅下拉选择可以使用Select。
仅输入可以使用Input。
那既能下拉选择又能输入怎么办呢？？？

这个时候就有一个很好的组件叫：AutoComplete

• 何时使用

需要一个输入框而不是选择器。
需要输入建议/辅助提示。

• antd官网代码演示

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

const options = [
  { value: 'Burns Bay Road' },
  { value: 'Downing Street' },
  { value: 'Wall Street' },
];

const App: React.FC = () => (
  <AutoComplete
    style={{ width: 200 }}
    options={options}
    placeholder="try to type `b`"
    filterOption={(inputValue, option) =>
      option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
    }
  />
);

export default App;

• 我的代码演示

 <AutoComplete
      placeholder="请选择名称，支持输入新建"
      filterOption={(inputValue: any, option: any) =>
    option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
  }

  {Array.isArray(list) && list.length
    ? list.map((i: any, index: number) => (
        <AutoComplete.Option key={index.toString()} value={i}>
          {i}
        </AutoComplete.Option>
      ))
    : null}
</AutoComplete>

参考链接：Ant Design官网