uniapp使用picker-view组件实现选择器可进行搜索

效果图：

1、使用uniapp自带的picker-view组件实现

<template>
	<!--pickerHospital 子组件-->
		<view class="date-background" v-show="value">
			<view class='date-gray-background' @click="hiddeDatePicker"></view>
			<view class='date-container'>
				<view class="transparent">
					<view class='date-confirm'>
						<view @click="hiddeDatePicker" class="pickerCancel">取消</view>
						<!-- 输入框 -->
						<u-search style="width: 70%;" placeholder="请输入医院查询" @clear="clearSearch" @change='searchChange'
							:show-action='false' v-model="searchValue" shape="round" clearabled></u-search>
						<view @click="confirm1" class="pickerConfirm">确认</view>
					</view>
						<picker-view :immediate-change='true' indicator-class="indicator" :value="setValues"
							@change="bindChange" mask-style="height:100rpx;"
							style="width: 100%; height: 80%;position:absolute;bottom:0rpx;text-align:center;background:white">
							<picker-view-column class="pickViewColumn">
								<view v-for="item in list" :key="item.id" class="u-column-item"
									style="height: 68rpx;overflow: hidden;">{{item.name}}
								</view>
							</picker-view-column>
						</picker-view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props: {
			dataSource: {
				type: Array,
				default () {
					return []
				}
			},
			pickerValues: { //picker默认展示的值
				type: Array,
				default () {
					return [0]
				}
			},
			value:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				searchValue: '', // 搜索值
				setValues: [0], // picker 选择值
				form: { //要传过去的值
					id: '',
					name: ''
				},
				list: this.dataSource,
			}
		},
		onLoad(option) {},
		watch: {
			dataSource: {
				handler(newValue, oldValue) {
					this.list = newValue
				},
				deep: true,
				immediate: true,
			},
			value(newValue, oldValue) {
				this.init()
			}
		},
		methods: {
			init() {
				this.$nextTick(() => {//组件渲染完成后在更新数据
					this.setValues = this.pickerValues
				})
			},
			bindChange(e) {
				let value = e.detail.value.toString();
				this.list.forEach((item, index) => {
					if (value == index) {
						this.form.id = item.id;
						this.form.name = item.name
					}
				});
			},
			hiddeDatePicker() {
				this.$emit('input',false)
			},
			confirm1(e) {
				if (this.form.id == '' && this.list.length > 0) {
					this.form = {
						id: this.list[0].id,
						name: this.list[0].name
					}
				}
				this.hiddeDatePicker()
				this.$emit('recload', this.form);
			},
			// 搜索查询
			async searchChange(e) {
				// ，调模糊查询然后 把返回的结果传给this.list数组
				let findList = this.dataSource.filter(item => item.name.includes(e))
				this.list = findList
				if (e == '') {
					this.list = this.dataSource
				}
				this.reset()
			},
			reset() { //重置
				this.form = {
					id: '',
					name: ''
				}
			},
			clearSearch() { //清空搜索内容
				this.searchValue = ''
				this.list = this.dataSource
			}
		},
	}
</script>

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

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

	.date-container {
		position: absolute;
		width: 100%;
		height: 60%;
		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: 60%;
		/* margin-top: -300rpx; */
	}

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

	.pickerCancel {
		font-size: 30rpx;
		color: #606266;
		// margin-right: 30rpx;
		// padding: 16rpx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;

		padding: 0rpx 8rpx;
	}

	.pickerConfirm {
		font-size: 30rpx;
		color: #2979ff;
		// margin-left: 30rpx;
		// padding: 16rpx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		padding: 0rpx 8rpx;
	}

	.u-column-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #303133;
		padding: 0 8rpx;
	}
</style>

2、在父组件中使用

<template>
	<!--父组件-->
	<view class="from">
		<u-form :model="form" ref="uForm">
			<u-form-item label="医院：" label-width="180rpx" prop="hospitalName">
				<view class="put" @click="getHospital()">
					<u-input placeholder="请选择医院" disabled @click="getHospital()" class="put-w"
						v-model="form.hospitalName" />
					<u-icon :name="isNation?'arrow-up-fill':'arrow-down-fill'" color="#C0C4CF" size="20"></u-icon>
				</view>
			</u-form-item>

		</u-form>
		<!--选择器搜索组件-->
		<pickerHospital v-model="isNation" :dataSource='hospitalArr' :pickerValues="[5]" @recload='confirmHospital'></pickerHospital>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospitalArr: [],
				form: {},
				isNation: false,
			};
		},
		methods: {
			async getHospital() {
				// 请求接口获取医院列表并将数据处理 打开下拉框
				// let res = await getHospitalList({
				// 	status: 1
				// })
				// if (res.code == 200) {
				this.hospitalArr = [{id: 1,name: 'oi99'},
					{id: 2,name: 'sss'},
					{id: 3,name: 'ovvvi99'},
					{id: 4,name: 'hfhgfhfg'},
					{id: 5,name: 'dfsdfsdfsdf'},
					{id: 6,name: 'fgfhf'},
					{id: 7,name: 'azzzzz'},
					{id: 8,name: 'fgfg'},
					{id: 9,name: 'sadad'},
				]
				//打开选择器
				this.isNation = true
				// if (res.data.length > 0) {
				// res.data.forEach(item => {
				// 	//将数据处理为对应格式
				// 	this.hospitalArr.push({
				// 		id: item.hospitalId,
				// 		name: item.hospitalName
				// 	})
				// })
				// }

				// }
			},
			confirmHospital(data) {
				console.log(data, '选择的数据')
			}

		},
	}
</script>

<style lang="scss" scoped>
	.from {
		padding: 20rpx 40rpx;

		/deep/.u-form-item {
			padding: 10rpx 0;
		}

		.put-w {
			// width: 180rpx;
		}

		.put {
			width: 100%;
			padding: 0 8rpx 0 0;
			display: flex;
			justify-content: space-between;
			// border: 2rpx solid #ccc;
			border-radius: 10rpx;
			// box-sizing: border-box;
		}
	}
</style>

tips：

• 对于输入框搜索后可不用@change事件，用 computed 属性，根据关键词过滤即可

<script>
export default {
  // ...
  computed: {
    list() {
      if (!this.searchValue) {
        return this.list; // 若未输入关键词，则不进行过滤，返回所有选项
      }
      return this.list.filter(item=> item.name.includes(this.searchValue)); // 过滤出符合条件的选项并返回
      });
    }
  }
}
</script>