搜索框实现模糊查询方法 - js

日常开发中经常会遇到搜索框查询的例子，需要对数组中的元素进行检索并查询出所需的结果，通过如下方式简单实现了一个小的模糊查询，具体如下：
首先，用到了两个方法
1.对数组通过 filter 的方式遍历查询搜索的 key
2.对遍历出的结果进行字符串的模糊查询 str.indexOf("xxx") != -1

其次，通过如上两种方法的组合从而获得一个类似模糊查询的效果；
最后，具体实现 code 如下：

// listRes:查询结果返回的数组 arr
// val:查询搜索的 key
onSearch(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 实例集成即可。

以上便是此次分享的全部内容，希望能对大家有所帮助！