uniapp 可搜索下拉框

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

1. 查询返回数据集之后先备份成backupData。
2. 增加一个输入框，用来输入要模糊查询的内容。
3. 增加一个“定位”按钮，用于把模糊内容查出来。
4. 增加一个“恢复”按钮，用于还原搜索前的数据。
5. 增加一个函数，支持传入目标数据的对象对应key，通过indexOf > -1的方式把所有符合条件的项都过滤出来，形成一个新的array，用于显示到当前页面。也可以通过传后台，让后台把模糊搜索的数据返回到前端的方式。
6. 增加一个函数，直接把最新的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" @tap="restore()">还原</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 初始化一个默认空值，防止报错
				bzArray: [{DEPARTNAME:'',ORG_CODE:''}],
				// 当前选中的下标，触发change事件后需要跟着变
				bzIndex: 0,
				// 模糊搜索的内容
				searchKey: '',
				// 备份的下拉数据
				backupSet: []
			}
		},
		onLoad(option) {
			// 页面加载的时候读取下拉数据
			this.initSelect()
		},
		methods: {
			/**
			 * 支持传入搜索key
			 * @param {Object} skey
			 */
			locate(skey) {
				if (!skey) {
					skey = 'DEPARTNAME'
				}
				// 这是临时下拉数据
				let arrSet = []
				
				// js直接处理 二选一
				for (let item of this.bzArray) {
					if (item[skey].indexOf(this.searchKey) > -1) {
						arrSet.push(item);
					}
				}
				this.bzArray = arrSet
				
				// 后端处理 二选一
				let that = this
				uni.request({
					url:'http://ip:port/app/path?skey='+skey,
					success(res) {
						// ...
						that.bzArray = res.arrSet
					},
					fail(e) {
						// ...
					}
					
				})
			},
			restore() {
				// 使用备份数据还原
				this.bzArray = this.backupSet
			},
			initSelect() {
				let that = this
				let url = `请求数据的URL`
				uni.request({
					url: url,
					success:function(res){
						// 赋初值
						that.bzArray = res.data.obj;
						// 备份数据(备份数据只能在加载的时候赋值一次，否则数据就跑丢了)
						that.backupSet = that.bzArray;
					},
					fail: (err) => {
						console.info(`失败了。。。。。${JSON.stringify(err)}`);
						uni.showToast({
							title: "请求服务器失败！",
							icon:'none',
							duration:2000
						})
					}
				})
			},
			bindBzChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.bzIndex = e.target.value;
				this.currentDepartId = this.bzArray[this.bzIndex].ORG_CODE;
			},
		}
	}
</script>

<style>

</style>