微信小程序显示模糊查询下拉数据

以前做的小程序需要做做一个一边输入一边出现模糊查询的数据，没有特定的api只能自己想别的方法

效果图

1.wxml
使用input标签里面的bindinput

<view class="all_one">
      <input class="chaxun" placeholder="请输入车架号或OE号" name="ip" bindinput="onBlur" placeholder-style="color:#333333"></input>
      <button  class="button" form-type="submit"><image src="/image/cha.png" class="cha"></image></button>
  </view>

这样每输入一个字就会调用一次js里的onBlur
2.js

onBlur:function(e){
    var that = this
    console.log(e.detail.value)
    console.log(e.detail.value.length)
    if (e.detail.value.length>4){
      wx.request({
        url: like_url,
        method: 'post',

        data: {
          key: e.detail.value
        },
        header: {
          //'Content-Type': 'application/json' //GET方式是这个
          "Content-Type": "application/x-www-form-urlencoded" //POST方式是这个
        },
        success: function (res) {//请求成功之后要做什么
          console.log(res.data)
          if(res.data.code==200){
            for (var i = 0; i < res.data.data.length;i++){
              var b = res.data.data[i].codenospace
              let a = b.split(e.detail.value)
              res.data.data[i].codenospace_=a
            }
            that.setData({
              guanliandata: res.data.data,
              key: e.detail.value,
              isShow: false
            })
          }
        },
        fail: function (err) {//请求失败之后要做什么
          wx.showModal({
            title: '暂无数据',
            showCancel: false,
            confirmText: '确定',

          });
        }
      }) 
    }
    if (e.detail.value.length==0){
      console.log("改变isShow")
      that.setData({
        isShow: true
      })
    }
    if (wx.getStorageSync('searchRecord').length == 0) {
      that.setData({
        hissearch: false
      })
    }
  },

这样我们就可以每次都调用接口了，我这里是输入4个以后的字符才会模糊查询，这样就需要后台反应足够快，否则不能及时更新，后台建议使用redis