微信小程序实现搜索功能

首先呢在wxml中创建input标签

  <input placeholder="请输入搜索关键词" 
    value="{{val}}"
    bindinput="search"
  ></input>

value绑定文本框的值，我这里使用的是bindInput事件，也就是只要是输入就会触发这个事件，这里呢不推荐用这种方法去写，因为你每次输入一个字母都会去请求一次后台，这样会给后台造成压力，使用bindconfirm这个方法，在点击回车时，也就是手机电脑上的回车会触发这个事件

wx.js

 search(e)
  {
    let name=e.detail.value;
    //通过e.detail.value接收输入的内容
    //console.log(e.detail.value)
    this.setData({
    //每次进去把之前的数据清空
      list:[],
      val:name //把输入的内容放进data里面
    })
    if(this.data.val=='')
    {
      this.getdata() 
      //当输入框等于空时，重新调用封装的请求数据的方法
    }
    wx.request({
      url: 'https://***********/shop/goods/list',
      success:((res)=>{
        //console.log(res.data.data)
        res.data.data.filter((item)=>{
          if(item.name.indexOf(this.data.val)>=0)
          //判断是否包含
          {
            console.log(item)
            this.data.list.push(item)
          }
        })
        //从新赋值
        this.setData({
          list:this.data.list,
        })
      })
    })
  },

这里需要注意的是当判断val是否为空时，不能直接 return false 而是重新调用之前请求所有数据的接口，如果return false 则文本框内容会变成false