微信小程序 联想搜索

wxml

<view style="width: 100%;height: 100rpx; background-color: green;display: flex;justify-content:center;align-items: center;">
      <input type="text" placeholder=" 搜索" bindinput="search" style="width: 560rpx;height:60rpx;background-color:white;"/>
</view>
<view>  
  <block wx:for="{{list}}" wx:key="key">    
    <view>
      {{item}}
    </view>
  </block>
</view>

js

// pages/search/search.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        arr:['iphone11','iphone12','iphone13','indao'],
      
        list:[],
        timer:null,  
    },
   
    search(res){
        clearTimeout(this.data.timer);
        this.data.timer = setTimeout(()=>{
           let value = res.detail.value;
           if(value=='')
           {
               this.setData({list:[]})
           }
           let  search = this.data.arr;
          let   reg  = new RegExp(value,'i')
          let  list = []; 
          list = search.filter((item,key)=>{
              return reg.test(item)
          })
            this.setData({list:list})
          console.log(list)
        },800)
    },

  
})