微信小程序 模糊搜索 功能

WXML 中

<view class="li l2">
    <input id='searchInput'  placeholder="请输入企业全称" type="text" bindinput="bindKeyInput"
        value="{{inputValue}}" data-statu="open" />
    <view class="scrollview" wx:if="{{showInputStatus}}">
        <view wx:for="{{bindSource}}">
        　　<view id="{{item.id}}" data-name="{{item.name}}" class="itemview" bindtap="itemtap" data-statu="close"
            wx:if="{{showInputStatus}}">{{item.name}}</view>
        </view>
    </view>
</view>

 

JS 中

data: {
    showInputStatus: false, //是否显示匹配的数据
    inpval: '', //双向绑定输入框
    inputValue: '', //点击结果项之后替换到文本框的值
    selid: '', //点击结果项之后选中的数据的id
    selname: '', //点击结果项之后选中的数据的名称
    adapterSource: [], //本地匹配源
    bindSource: [], //绑定到页面的数据，根据用户输入动态变化
  },

bindKeyInput: function (e) {
    console.log(e.detail.value)
    if (e.detail.value == null||e.detail.value =='') {
      this.setData({
        showInputStatus:false
      })
      return
    }
    if (e.detail.value !== undefined) {
      this.setData({
        inpval: e.detail.value.replace(/\s+/g, '')
      });
    }

    var currentInputStatu = e.currentTarget.dataset.statu;
    var prefix = e.detail.value.replace(/\s+/g, '') //用户实时输入值
    var newSource = [] //匹配的结果
    if (prefix != ""&&e.detail.keyCode) {
      // 调用接口，关键字返回匹配的数据列表
      api.get(`/api/company/query-company?keyword=${prefix}`).then(res => {
        if (res.code == 200) {
          var arr = []
          for (var i = 0; i < res.content.list.length; i++) {
            var obj = {}
            obj.name = res.content.list[i].companyName
            obj.id = res.content.list[i].userId
            arr.push(obj)
          }
          arr.forEach(function (e) {
            if (e.name.indexOf(prefix) != -1) { //返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没有出现，则该方法返回 -1
              newSource.push(e)
            }
          })
          if (newSource.length != 0) {
            this.setData({
              bindSource: newSource
            })
          } else {
            this.setData({
              bindSource: []
            })
            currentInputStatu = "close";
          }
          //关闭 
          if (currentInputStatu == "close") {
            this.setData({
              showInputStatus: false
            });
          }
          // 显示 
          if (currentInputStatu == "open") {
            this.setData({
              showInputStatus: true
            });
          }
        } else {
          wx.showModal({
            title: '提示',
            content: res.message,
            showCancel: false
          })
        }
      })

    } else {
      currentInputStatu = "close";
    }
  },

itemtap: function (e) {
    var currentInputStatu = e.currentTarget.dataset.statu;
    var name = e.currentTarget.dataset.name;
    this.setData({
      inputValue: name,
      selid: e.target.id,
      selname: name,
      inpval: name,
      bindSource: []
    })//关闭 
    if (currentInputStatu == "close") {
      this.setData({
        showInputStatus: false
      });
    }
    // 显示 
    if (currentInputStatu == "open") {
      this.setData({
        showInputStatus: true
      });
    }
  },