picker组件增加搜索item条目的功能

picker组件顶部有搜索框，能搜索条目，如果条目很多的时候，上下翻很麻烦了，而且不容易找到,可以先全查，然后js搜索

wxml

<button bindtap="openFlag">可搜索选择框</button>
<view class="date-background" hidden="{{flag}}">
  <view class='date-gray-background' bindtap='hiddeDatePicker'></view>
  <view class='date-container'>
    <view class="transparent">
      <view class='date-confirm'>
        <view bindtap='hiddeDatePicker'>取消</view>
        <van-search
          value="{{searchValue}}"
          input-align="center"
          placeholder="请输入学生电话号码"
          bind:change="searchSchool"
        />
        <view bindtap='confirm'>确定</view>
      </view>
      <picker-view
        indicator-class="indicator"
        value="{{setValues}}"
        bindchange="bindChange"
        bindpickend="_bindpickend"
        indicator-style="height: 100rpx;"
        mask-style="height:900rpx;"
        style="width: 100%; height: 90%;position:absolute;bottom:0rpx;text-align:center;background:white"
      >
 
        <picker-view-column class="pickViewColumn">
          <view wx:for="{{items}}" wx:key="id" style="line-height: 104rpx">{{item.userName}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</view>

wxss

/* pages/newstudents/newstudents.wxss */

.date-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.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;
  color:var(--ThemeColor)
}
.pickViewColumn{
  height: 900rpx;
  margin-top: -300rpx;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}

js

const app = getApp();

Page({
  data: {
      //控制picker的显示与隐藏
  flag: false,
      // 用户输入的学校关键词
        // 滚动选择的学校
  setValues: [],
   teachers: [{userName:"张三"},{userName:"李四"},{userName:"刘三"},{userName:"王五"},{userName:"不配有名字的五"}],
   items:[],
  // 滚动选择的学校索引
  selectSchoolIndex:'',
  searchValue:'',

  },
  onl oad: function (options) {
  console.log('onLoad-----------------:') ;
  this.setData({
    // 用户赋值
    items:this.data.teachers
  })

  },

  searchSchool(e){
    // items
      console.log("搜索==========",e.detail)
      const backendData = this.data.teachers;
      console.log("数据====",backendData)
// 定义一个方法来执行模糊查询
function fuzzySearch(keyword) {
  // 使用 filter 方法筛选包含关键字的元素
  const result = backendData.filter(item => {
    // 检查 name 属性是否存在，并且是一个字符串
    if (item.userName && typeof item.userName === 'string') {
      // 将字符串都转为小写进行比较，实现不区分大小写的模糊查询
      return item.userName.toLowerCase().includes(keyword.toLowerCase());
    }
    return false;
  });

  return result;
}

      const searchResult = fuzzySearch(e.detail);
      console.log("搜索==后的结果==",searchResult)

      this.setData({
        // 用户赋值
        items:searchResult
      })
  },
  // 假设模糊查询的关键字为 keyword


  //用户滚动picker时，获取滚动选择的索引
  bindChange(e){
    this.setData({
      // 用户选择的学校索引
      selectSchoolIndex:e.detail.value[0]
    })
    console.log("-----------------------选择 ：",e.detail.value[0])
  },

  //确定
  confirm(){
    console.log("-----------------------选择 确定 ")
    this.setData({   
      flag:true
    })
  },
//打开弹框
  openFlag(){
    console.log("打开弹框")
    this.setData({
      flag:false,
    })
  },
  //取消
  hiddeDatePicker(){
    console.log("取消")
    this.setData({  
      flag:true
    })
  },
 
 })