对下拉框进行模糊查询：一边输入一边模糊匹配

目录

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组件内部封装好的，直接拿来用

  
    
      
        {getFieldDecorator('code')(
           option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }
          >
         {Array.isArray(messageList) && messageList.length > 0 ? messageList.map(item => 
           {item.code}: ''
          )}
          
        )}
      
    
  

 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下拉选择器(支持自动分词)
• 多级联动下拉选择器
• 搜索远程数据下拉框