简单的模糊查询筛选匹配实现思路---小程序实现

淡淡的烟草味﹌ 2023-03-02 10:16 2阅读 0赞

**模糊查询筛选匹配主要是用输入框的时候，输入关键字然后将符合的展示出来！**

这里举例是小程序中一个demo，鉴于自己比较笨，我要写很详细让自己明白  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200728175806960.png]

**逻辑思路是这样的**：要获得输入框里面的值，然后将这个值在原本的数组里遍历匹配，然后再获得符合条件的值，【这个时候不能将遍历出来的值来改变原本的数组】，所以要有一个新数组来接收筛选出来的值，然后再让其遍历展示出来！

**需要用到的值：**  
原本的数组  
新数组  
输入框的值  
**遍历的时候用三元运算符判断展示哪一个数组**

**需要用到的方法：**  
数组遍历的方法，这里用了**map()**

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。  
map() 方法按照原始数组元素顺序依次处理元素。  
注意： map() 不会对空数组进行检测。  
注意： map() 不会改变原始数组。

匹配的方法：这里用了**indexOf()**  
indexOf():匹配的时候找不到就会返回-1

总体的思路就是这样的，实现如下：

<input type="text" style="background:yellow" bindinput="serchData" ></input>
    <block wx:for="{ {testList.length >0 ?testList:list}}" wx:key="index">

serchData(e){ 
        let value = e.detail.value
        let list = this.data.list
        let testList = []
        console.log(list)
        list.map(item=>{ 
          if(item.indexOf(value)>-1){ 
            testList.push(item)
          }
        })
        this.setData({ testList})
        console.log(testList)
      },

这里用到map()方法，ES6中的方法，更多是遍历数组时可以进行运算，下面是JS遍历数组的一些方法  
https://www.cnblogs.com/wangdashi/p/9431860.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5NjQyMg_size_16_color_FFFFFF_t_70]: /images/20230208/e6c0a8cc2ee947f9a8aed33c324a679b.png
[20200728175806960.png]: /images/20230208/ed42224f53254fdb825e3d44b55e653c.png