目录
1、对下拉框进行模糊查询：一边输入一边模糊匹配
2、拓展：使用antd UI框架中的select需要注意的一些问题
3、Antd-Select提供几种类型
1、对下拉框进行模糊查询：一边输入一边模糊匹配
Ant Design 组件：https://ant.design/components/select-cn
代码中实现：
allowClear：可点击小叉号清除输入框中的数据，输入框尾部出现这个 ‘x’
showSearch：让下拉框有输入功能
optionFilterProp：搜索时过滤对应的
option属性，如设置为children表示对内嵌内容进行搜索filterOption：根据输入项进行筛选，是antd组件内部封装好的，直接拿来用
<div><Row><Col><FormItem label="模板类别">{getFieldDecorator('code')(<Selectstyle={{ width: '100%' }}placeholder="请输入模板类别"allowClearshowSearchoptionFilterProp="children"filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }>{Array.isArray(messageList) && messageList.length > 0 ? messageList.map(item => <Select.Option key={item.id} value={item.code}>{item.code}</Select.Option>: '')}</Select>)}</FormItem></Col></Row></div>
2、拓展：使用antd UI框架中的select需要注意的一些问题
问题1：滚动跟随问题
问题描述：使用表单时，当页面过长出现滚动，select的下拉框不会跟随输入框，造成用户体验性不好
解决方法：在 Option 或Select.Option 中添加 getPopupContainer={(triggerNode) => triggerNode.parentNode}，完美解决
问题2：可输入过滤选项问题
问题描述：通过输入过滤选项
解决方法：在 Option 或Select.Option 中添加 showSearch 与 optionFilterProp="children"，完美解决
问题3：动态加载
问题描述： 动态分页加载option的选项，并且，滚动加载更多，可支持关键字搜索（由后端查询数据库放回数据）
解决方法:：
1、当搜索框聚焦时，获取数据，如10条，关键字为空
2、将数据遍历到option选项中
3、选项的滚动，当滚动到底部时，加载下一页的数据，在option中添加方法 onPopupScroll={this.scrollMore} scrollMore函数如下
scrollMore = (e) => {e.persist();if(this.state.scrollFlag){ //scrollFlag 节流阀，防止操作频繁没将数据完全加载const { target } = e;if ((target.scrollTop + target.offsetHeight) > (target.scrollHeight-25)) { //当滚动到最底部25像素的时开始加载const { Params } = this.state;var pindex = Params.pageIndex +1;if(pindex <= this.state.pageEnd){ //判断要查询的页是否已经是最后一页了this.setState({scrollFlag: false,Params:{...this.state.Params,pageIndex:pindex}},() => {this.getList(); //获取option的数据})}}}}至此，滚动加载完成，要注意，在每次聚焦的时候，pageIndex都要先置为1，即从第一页开始查询，否则就是从先前滚动到的那一页。在获取到数据之后，即在getList函数内，要对获取到的数据进行处理，要把获取到的数据拼接在list后面，否则会造成加载更多时之前的数据不见了，并且，在pageIndex是1的时候不拼接，直接赋值。
4、在输入值时会触发option的onSearch事件，在函数里进行查询并重新复制list
此时，会发现一个问题，查询后的值不会马上出来，会等到下一次聚焦搜索框时才会出现。
解决方法：在option中加 filterOption={false}
这样就实现了条件的过滤和关键字的过滤。
3、Antd-Select提供几种类型
最基础版只提供下拉功能的选择器带搜索功能的下拉选择器可多选的下拉选择器可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)多级联动下拉选择器搜索远程数据下拉框
