首先呢在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