先上效果图:
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自动完成