前端实现简单模糊搜索

首先看看实现的效果

这里把用户输入的字符串用正则拆分成单个字符去匹配数组中包含这些字符的值。

详细代码如下：

//value是获取到的用户输入的值
//dataList是后台返回数组
//dataSource是根据用户输入的value值去dataList里筛选出符合条件的项

let dataSource= dataList.filter(function (item) {
            //遍历数组，返回值为true保留并复制到新数组，false则过滤掉
            let inputValue=new RegExp(`(.*)(${value.split('').join(')(.*)(')})(.*)`, 'i');
            return item.match(inputValue);
        });

 注意：当value值被清除为空时，这里有可能会报错TypeError: Cannot read property 'split' of undefined

解决方法如下：

let valueInput=value || '';
let dataSource= dataList.filter(function (item) {
            //遍历数组，返回值为true保留并复制到新数组，false则过滤掉
            let inputValue=new RegExp(`(.*)(${valueInput.split('').join(')(.*)(')})(.*)`, 'i');
            return item.match(inputValue);
        });

---

出处：https://blog.csdn.net/qq_41882147/article/details/81536034

 

---