微信原生小程序picker组件+搜索框

微信小程序picker中含有搜索框的功能 效果图如下 直接cv就可以用

<view class="date-background"   wx:if="{{show}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view class="transparent">
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker' style="color:#f60">取消</view>
        <input bindinput="bindNameInput" type="text" class="searchInpt" style="width:220px"  bindfocus='bindNameFocus'    value="{{selectedName}}"/>
        <view bindtap='confirm' style="color:#12a3f5">确定</view>
      </view>
      <picker-view indicator-class="indicator" value="{{index1}}" bindchange="bindNameChange" bindpickend="_bindpickend"
        immediate-change="{{true}}">
        <picker-view-column class="pickViewColumn">
          <text wx:for="{{array}}" wx:key="index" style="color:#000;line-height:46px;text-align:center;display:block"
            decode="{{true}}">{{item.name}}</text>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>
<view bindtap="showDatePicker" class="showPickerText">
  {{'请选择'}}  {{array[index].name}}
</view>

Page({
  data: {
    array1: [
      { id: 0, name: '选项1' },
      { id: 1, name: '选项2' },
      { id: 2, name: '选项3' },
      { id: 3, name: '选项4' },
      { id: 4, name: '选项5' }
    ],
    array:[],
    index: 0,
    index1: -1,
    selectedName:'',
    show:false
  },
  bindChange(e) {
    // console.log(e,'eee')
    this.setData({
      index: e.detail.value
    })
  },
  showDatePicker(e) {
    console.log(e,'ee')
    this.setData({
      show: !this.data.show,
      array:this.data.array1,
      index1:this.data.index
    });
    // this.getItems();
  },
  bindKeyInput(e){
console.log(e)
  },
  bindNameFocus(e) {
    console.log(e,'huyhuh')
    this.setData({ isSearchListShow: true });
},
bindNameChange(e) {
  this.setData({
    index: e.detail.value
  })
  // let name = e.currentTarget.dataset.item;
  // this.setData({ selectedName: name, isSearchListShow: false });
},
confirm(){
this.setData({
  show:!this.data.show
})
},
hiddeDatePicker(){
  this.setData({
    show:!this.data.show
  })
},
bindNameInput(e) {
  console.log(e,'eee')
  // const keyword = e.detail.value.toLowerCase();
  const keyword = e.detail.value;
 console.log(keyword,'jkey')
  let searchResults = this.data.array1.filter(item => item.name.includes(keyword));  
  console.log(searchResults); // 输出结果
  if(keyword==null){
    console.log(111)
    this.setData({ 
      array:this.data.array1
    });
  }else{
    console.log(222)
    this.setData({ 
      array:searchResults
    });
  }
  console.log(this.data.array)
  


  // const reg = new RegExp(keyword);
  // const matchedNameList = this.data.array.filter(item => reg.test(item.toLowerCase()));
  // this.setData({ matchedNameList });
},
})

.showPickerText{
  width: 240px;
  text-align: right;
}
.date-background {
  /* position: absolute; */
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;

}
.searchInpt{
  width: 220px;
  border: 1px solid #e5e5e5;
  height: 40px;
  border-radius: 5px;
  padding-left: 20px;

}
.date-gray-background {
  position: absolute;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, .5);
  height: calc(100% - 500rpx);
}
.date-container {
  position: absolute;
  width: 100%;
  height: 900rpx;
  overflow: hidden;
  background: #fff;
  bottom:0;
  z-index: 1000;
}
 
.date-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 20rpx;
  font-size:34rpx;
  line-height: 70rpx;
  padding-top:10px;
  color:var(--ThemeColor)
}
.pickViewColumn{
  height: 900rpx;
  /* margin-top: -300rpx; */
  /* text-align: center; */
 text-align: left;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}