解决el-autocomplete组件远程搜索的区间匹配问题

el-autocomplete 是 element 中一个常用的组件,用于实现输入框自动完成的功能。然而,它的默认配置在远程搜索时存在一个问题:无法进行区间匹配。换句话说,即使输入的关键词是某个选项的子串或关键词的子串,也无法正确地搜索到该选项。本文将告诉你如何解决这个问题,实现更智能的 el-autocomplete 远程搜索功能

可以看到当我搜索一个值的区间时,直接就搜索不出来了,那要怎么实现区间也可以搜索出来呢,其实关键在于 createStateFilter 方法。

默认的 createStateFilter 方法

createStateFilter(queryString) {
  return (state) => {
    return (
      state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
},

 要实现区间也可以搜索出来,你需要对 createStateFilter 方法进行修改。当前的实现是对输入的字符串与站点名称的前缀进行匹配,所以只能搜索到名称的开头部分。下面我们将 createStateFilter 方法的逻辑进行修改。

 解决方法:

createStateFilter(queryString) {
  return (state) => {
    return (
     state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
    );
  };
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值