小程序中实现 input 搜索框功能

场景描述：

      在一个列表界面中，顶部是input搜索框。(一般情况是点击搜索框会跳转搜索界面进行相关逻辑的处理。但是，我们这个不跳转新界面，是在当前界面进行搜素。)

wxml 代码如下:

<input type="text" placeholder="搜索相关内容" bindinput="searchContent" value="{{searchVal}}">

js 代码如下：

let timer = 0;//这里是定义一个全局的变量。
Page({
   data:{
      searchVal:'',
   },
   //input的搜索事件
   searchContent:function(e){
      let keyWord = e.detail.value ? e.detail.value : null ;
      let that = this;
      if(timer){
          clearTimeout(timer)
      }
      timer = setTimeout(()=>{
          if(keyWord==null){
             //这里表示  如果搜索框中没有数据的话，做的一些处理
          }else{
            //这里是搜索框中有值的情况，可以直接请求搜索接口即可
          }  
      }，1000)
      that.setData({
         searchVal:keyWord,
         timer:null 
      })
   },
   //请求搜索接口
   requestSearchApi:function(data){
     //例如:方法照例简单封装了一下
     Utils.get('api/xxx',data).then(res=>{}).catch(err=>{})
   }
})