先上效果图：
index.jsx文件
import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { Form, AutoComplete } from 'antd'; @Form.create() export default class AutoCompleteCom extends PureComponent { //选中目标值时的操作 onSelect = value => { console.log(value); //北京上海9544有限公司 } render(){ const companyList = ['北京库库有限公司','上海高塔有限公司','北京上海9544有限公司']; const { getFieldDecorator } = this.props.form; return( <Form hideRequiredMark> <Form.Item label={'公司'}> {getFieldDecorator('company', { rules: [ { required: true, message: '请选择公司', }, ], })( <AutoComplete key="AutoCompleteCom" dataSource={companyList} /* *此处的filterOption对象中的函数就是筛选函数 *inputValue:输入框输入的值 *option:List中的所有元素 */ filterOption={(inputValue, option) => option.props.children.includes(inputValue) } onSelect={this.onSelect} placeholder="请选择" /> )} </Form.Item> </Form> ) } }filterOption中参数说明： 当我点击input框进行查询的时候就会将所有的option和当前的inputValue值进行输出，然后从option中进行查找匹配，匹配几个显示几个，相当于循环option查找匹配值。 此处列表中定义的元素有三个，所以会输出三次option和inputValue。 const companyList = [‘北京库库有限公司’,‘上海高塔有限公司’,‘北京上海9544有限公司’]; 参考： Ant Design组件：AutoComplete自动完成
