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

outstanding木槿

已于 2025-02-08 15:24:22 修改

阅读量3.3k

点赞数 2

分类专栏： react+antd组件 react之函数组件、类组件文章标签： javascript 前端框架 react js react.js

于 2023-04-26 15:08:48 首次发布

本文链接：https://blog.csdn.net/qq_47305413/article/details/130385847

版权

react+antd组件同时被 2 个专栏收录

40 篇文章

订阅专栏

react之函数组件、类组件

16 篇文章

订阅专栏

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')(
          <Select
            style={
   
   { width: '100%' }}
            placeholder="请输入模板类别"
            allowClear
            showSearch
            optionFilterProp="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}
这样就实现了条件的过滤和关键字的过滤。