uniapp 可搜索下拉框

最新推荐文章于 2025-10-14 11:49:13 发布

原创

最新推荐文章于 2025-10-14 11:49:13 发布 · 8.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍如何在uni-app中实现带有模糊搜索功能的下拉选择框，包括备份原始数据、用户输入关键字搜索、定位匹配项及还原数据等功能。

基于uniapp官方的picker实现（也可以自定义select）。.

查询返回数据集之后先备份成backupData。
增加一个输入框，用来输入要模糊查询的内容。
增加一个“定位”按钮，用于把模糊内容查出来。
增加一个“恢复”按钮，用于还原搜索前的数据。
增加一个函数，支持传入目标数据的对象对应key，通过indexOf > -1的方式把所有符合条件的项都过滤出来，形成一个新的array，用于显示到当前页面。也可以通过传后台，让后台把模糊搜索的数据返回到前端的方式。
增加一个函数，直接把最新的array覆盖成备份数据backupData，用于还原搜素。

代码样例：

<template>
	<view>
		<view >这是个下拉</view> 
			<picker @change="bindBzChange" :value="bzIndex"   :range-key="'DEPARTNAME'"  :range="bzArray">
				<view class="uni-input">{
  
  {bzArray[bzIndex].DEPARTNAME || ''}}</view>
			</picker>
		<view>
			模糊搜索：<input placeholder="请输入搜索关键字" v-model="searchKey" />
		</view>
		<view style="margin-top: 10rpx; display: flex; flex-direction: row;">
			<button  size="default" type="mini" @tap="locate()">定位</button>
			<button  size="default" type="mini" @t

最低0.47元/天解锁文章