微信小程序模糊查询下拉弹窗,picker和input配合使用

// wxml
<view>
    <view>商户姓名</view>
    <view >
      <input type="text" value="{{merchant_name?merchant_name:''}}"  placeholder="请选择商户" bindinput="handlerInput" >
    </view>
    <picker  bindchange="bindPickerBuyersName" range-key="merchant_name" range="{{Merchlist}}">
    // range 列表数组  range-key 显示内容 bindchange 数组索引变化时触发 => 相当于你选择时触发
    </picker>
</view>

// js 部分
page({
   data:{
    merchant_name: '',  // 商户名
    Merchlist:[],  // 筛选后的数组， 刚开始和原数组一样内容
    Merchlist1:[], // 原数组  ，ajax获取商户数组的时候，赋值的

    }

    // 输入商户姓名
      handlerInput(e){
        let val = e.detail.value;
        const {Merchlist} =this.data;
        // 如果输入内容，则按照输入内容在商户数组中进行筛选，因为刚开始加载页面，该数组和原数                
        组一致
        if(val){
          let a = Merchlist.filter(item => item.merchant_name.indexOf(val) != -1)
          this.setData({Merchlist:a})
        }
        // 输入为空，或者清除，就把原数组赋值给筛选后的数组
        else{
          this.setData({Merchlist:this.data.Merchlist1})
        }

  },
    // 数组索引选项变化时触发
    bindPickerBuyersName(e) {
    let i = e.detail.value;
    let name = this.data.Merchlist[i].merchant_name;
    let id = this.data.Merchlist[i].id;
    this.setData({
      merchant_name: name,
      merch_id: id,
      goods_name: '请选择',
      Merchlist:this.data.Merchlist1
    })
    this.getGoods();
  },

})

原因： 微信小程序下拉选项的时候从下方弹出选项列表，但由于选项列表较多，加入输入某些字段进行筛选，方便查询选项。

话不多说，上代码，记录开发中的事情~~