日常开发中经常会遇到搜索框查询的例子,需要对数组中的元素进行检索并查询出所需的结果,通过如下方式简单实现了一个小的模糊查询,具体如下:
首先,用到了两个方法
1.对数组通过 filter 的方式遍历查询搜索的 key
2.对遍历出的结果进行字符串的模糊查询 str.indexOf("xxx") != -1
其次,通过如上两种方法的组合从而获得一个类似模糊查询的效果;
最后,具体实现 code 如下:
// listRes:查询结果返回的数组 arr// val:查询搜索的 keyonSearch(val) {if (val.length === 0) {this.listRes = this.list;} else { // 过滤数据源let res = this.listRes.filter((value) => {console.log(val);console.log(value);// str.indexOf("3") != -1// value.scoreName == val;return value.scoreName.indexOf(val) != -1; // 检索数据源中相等的字段});this.listRes = res;}},
此次实现搭配使用的是该Vant Search 组件
UI 部分很简单直接根据 demo 实例集成即可。
以上便是此次分享的全部内容,希望能对大家有所帮助!