[picker-view] uni implements a selector with a search box (too lazy to flip through the code, it’s a good cv to write here)

Adjust the style according to your needs

Component part:

<template>
<view class="">
<!-- query start-->
<view class="date-background" v-show="flag">
<view class='date-gray-background' @click="hiddeDatePicker"></view>
<view class='date-container'>
<view class="transparent">
<view class='date-confirm'>
<view @click="hiddeDatePicker" class="pickerCancel">Cancel</view>
<u--input cursorSpacing='500' v-model="searchValue" placeholder="Please enter the student number or name to search" border="surround"
@change='searchChange'></u--input>
<view @click="confirm1" class="pickerConfirm">OK</view>
</view>
<picker-view indicator-class="indicator" :value="setValues" @change="bindChange"
indicator-style="height: 70rpx;" mask-style="height: 900rpx;"
style="width: 100%; height: 80%; position: absolute; bottom: 0rpx; text-align: center; background: white">
<picker-view-column class="pickViewColumn">
<view v-for="item in dataSource" :key="item.xh" style="line-height: 68rpx">
{<!-- -->{item.xm}}({<!-- -->{item.xh}})
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
<!-- query end -->
</view>
</template>

<script>
import xsqjService from "@/api/xsqj/xsqjService"
export default {
props: {
/**
* The value displayed by picker by default is not used at present, and the default value currently used is setValues
*/
value: {
type: Array,
default () {
return [0]
}
},
},
components: {},
data() {
return {
dataSource: [],
dataSourceCopy: [],
flag: false,
searchValue: '', // search value
setValues: [6], // picker selection value, the boss requires the selected box to be in the middle, so my default selected subscript is 6
inputForm: {
xh: '',
xm: ''
}
}
},
created() {
this.getXs() //I put the interface in the component to get it, because the data passed from the parent component is too slow, which will lead to no data when the page is opened for the first time
},
methods: {
// get students
async getXs() {
uni. showLoading({
title: 'Loading'
})
const res = await xsqjService. getxslist();
this.dataSource = res;
this.dataSourceCopy = res;
this.dataSource.forEach((item, index) => {
if (this. setValues[0] == index) {
this.inputForm.xh = item.xh;
this.inputForm.xm = item.xm
}
});
uni.hideLoading()
},
\t\t\t// Inquire
pinpaiFun() {
this.flag = true;
},
// scroll subscript
bindChange(e) {
console.log(e.detail.value.toString());
let value = e.detail.value.toString();
this.dataSource.forEach((item, index) => {
if (value == index) {
this.inputForm.xh = item.xh;
this.inputForm.xm = item.xm
}
});
},
hiddenDatePicker() {
this.flag = !this.flag
},
showDatePicker() {
this.flag = !this.flag
},
confirm1(e) {
this.flag = !this.flag;
this. $emit('recload', this. inputForm);
},
// search query
searchChange(e) {
// fuzzy search, you can also use interface query
if (this. searchValue) {
this.dataSource = this.dataSourceCopy.filter((item) => {
if (item. xh. indexOf(e) > -1 || item. xm. indexOf(e) > -1) {
return true
}
})
if (this. dataSource. length > 0) {
this. setValues = [6]
this.dataSource.forEach((item, index) => {
if (this. setValues[0] == index) {
this.inputForm.xh = item.xh;
this.inputForm.xm = item.xm
}
});
} else {
this.inputForm.xh = '';
this.inputForm.xm = ''
}

} else {
this.dataSource = this.dataSourceCopy
this. setValues = [6]
this.dataSource.forEach((item, index) => {
if (this. setValues[0] == index) {
this.inputForm.xh = item.xh;
this.inputForm.xm = item.xm
}
});
}
}
},
}
</script>

<style lang='scss' scoped>
.date-background {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
}

.date-gray-background {
position: absolute;
width: 100%;
top: 0rpx;
background: rgba(0, 0, 0, .5);
height: calc(100% - 500rpx);
}

.chaxunjieguo {
width: 100%;
height: 500rpx;
overflow: scroll;
color: black;
}

.chaxunjieguo text {
display: block;
text-align: center;
padding-bottom: 10rpx;
}

.date-container {
position: absolute;
width: 100%;
height: 960upx;
overflow: hidden;
background: #fff;
bottom: 0;
z-index: 1000;
}

.date-confirm {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
font-size: 34rpx;
line-height: 100rpx;
z-index: 2;
//line-height: 70rpx;
// color: var(--ThemeColor)
}

.pickViewColumn {
height: 900rpx;
/* margin-top: -300rpx; */
}

.indicator {
height: 80rpx;
/* border: 1rpx solid #E5E8E8; */
}

.pickerCancel {
font-size: 30rpx;
color: #777;
margin-right: 30rpx;
}

.pickerConfirm {
font-size: 30rpx;
color: #4C83D6;
margin-left: 30rpx;
}
</style>

use:

 <template>
             <view>
<u-form-item label="Student ID:" prop="xh" borderBottom>
<view class="ruku">
<view class="formbox">
<view class="formitem flex_align_center">
<view class="forminput" @click="searchxh">
<text v-if="inputForm.xh">{<!-- -->{inputForm.xh}}</text>
<text class="graytext" v-else> Please select your student number </text>
</view>
</view>

<!-- 1. Component use -->
<studentPicker :value="defaultValue" ref="studentPicker" @recload='getbrand'>
</studentPicker>
</view>
</view>
</u-form-item>
<u-form-item label="Name:" prop="xm" borderBottom>
<u--input disabled v-model="inputForm.xm" border="none"></u--input>
</u-form-item>
            </view>
         </template>

<script>
export default {
data() {
return {
                inputForm: {
                    xm:'',
                    xh:''
                }
defaultValue:[0], // default value
}
},
methods: {
// student number query
searchxh() {
this.$refs.studentPicker.showDatePicker();
},
// Receive the value of the parent component
getbrand(data) {
this.inputForm.xm = data.xm;
this.inputForm.xh = data.xh;
},
}
}
</script>

<style lang="scss">
.formbox.formitem {
margin-bottom: 10rpx;
}

.formbox .formitem .formlabel {
width: 180upx;
color: #666666;
font-size: 28upx;
}

.formbox.formitem.forminput {
border-radius: 10upx;
border: 1rpx solid #e5e5e5;
width: 350rpx;
height: 70rpx;
line-height: 70rpx;
padding-left: 24rpx;
}


.formbox .formitem .forminput .downimg {
position: absolute;
right: 16rpx;
top: 25%;
width: 32rpx;
height: 32rpx;
}

.formbox .formupbox .formlabel {
width: 100%;
height: 100%;
}

.formbox.formupbox.formupload {
margin-top: 22rpx;
}

.formbox .form_input .u-input {
width: 490rpx;
height: 70rpx;
line-height: 70rpx;
}

.formbox.textarea {
width: 490rpx;
border: 1rpx solid #DBDBDB;
border-radius: 8rpx;
padding: 10rpx 15rpx;
font-size: 30rpx;
}

.formbox.placeholderStyle {
color: #c0c4cc;
font-size: 30rpx;
}

.formbox /deep/textarea,
.formbox /deep/.uni-textarea-wrapper {
width: 460rpx !important;
}

.flex_align_center {
display: flex;
align-items: center;
}
</style>