小程序中實現 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=>{})
   }
})