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

本文主要是介绍使用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: '请选择公司',},],})(<AutoCompletekey="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自动完成