微信小程序搜索框实现模糊查询功能【关键点！！！】_微信小程序的搜索框

实现效果如下：

样式注意点

1、下拉搜索框高度自适应，但是不能超过最大高度

height: auto;
max-height: 280px;
1
2

2、主要逻辑
当输入的时候，用e.detail.value拿到输入的值
新建一个空数组，也就是你页面组要渲染的搜索后的内容
循环原来数组的字段，当某一项输入的值与字段匹配上，也就是indexOf取值大于等于0时
把匹配上的那一项push到新数组中，然后渲染

inputTyping(e) {
    let userInputValue = e.detail.value
    if(userInputValue !=''){
      if(e.detail.cursor){   //input焦点所在位置
        let arr = []
        for(let i =0; i < this.data.list1.length; i++){
          if(this.data.list1[i].indexOf(userInputValue)>=0){
            arr.push(this.data.list1[i])
          }
          this.setData({
            scrollShow: true,
            list1: arr
          })
        }
      }
    }
 }   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17