使用antd中AutoComplete组件写一个模糊查询功能

先上效果图：

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自动完成