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:'',
},
onLoad: 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
})
},
})
- 条目 组件 功能 picker item条目 组件 功能picker 条目 组件element el-form picker a-date-picker a-time-picker组件 vant表单vant-picker组件 date-picker组件 日期picker record-picker salesforce组件record element-plus default-time date-picker组件 event el-menu-item validation组件 el-date-picker组件elementui picker uni-datetime-picker组件uni datetime