微信小程序模糊搜索

html部分

//输入框
<input value='{{searchValue}}' placeholder='请输入···' bindinput='seach'></input>
//联想词显示区
<block wx:for='{{listData}}' wx:key='*this'>
  <view bindtap='click' data-item='{{item}}'>{{item}}</view>
</block>

css部分

input{
  border: 1rpx solid #000;
}

样式比较简陋

js部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    searchValue:'',//输入框文字
    //被查询数组
    list:[
        '小明', '小红', '小李', '小王', '百事可乐', '可口可乐', '无糖雪碧', '凉皮', '肠粉', '焖面', '小龙虾', '过桥米线', '脆皮鸡', '香锅', '排骨炖豆角', '排骨炖玉米', '排骨汤', '排骨怎么做都好吃', '等等··'],
    listData:[],//联想内容数组
  },
  // bindinput方法
  seach(e) {
    let self=this
    //每次输入都先清空联想词数组否则就会发生联想词内容重复的情况哦！
    self.setData({
      listData: []
    })
    //获取到输入的内容
    let value = e.detail.value
    //判断输入的内容不等于空的时候才联想否则你就会发现输入框清空的时候list数组里的数据都显示了呢
    if (value!=''){
    //forEach循环list数组
      self.data.list.forEach(function (e) {
      //判断indexOf不等于-1的数据push到联想词数组
        if (e.indexOf(value) != -1) {
          let listData = self.data.listData
          listData.push(e)
          self.setData({
            listData
          })
        }
      })
    }
  },
  //点击联想词的时候清空联想词数组并把联想词放进input
  click(e){
    this.setData({
      searchValue: e.currentTarget.dataset.item,
      listData: []
    })
  },
})

输入可联想出可字相关

基本功能实现啦

以上就是来自一个前端菜鸟的分享

end···