uniapp-模糊查询

前言： 由于uniapp没有提供，uView组件库也没有提供，于是封装了一个组件。

图片展示：

代码如下：

vagueSearch.vue

<template>
	<view class="vagueSearch">
		<view class="input">
			<u--input class="search-input" type="text" v-model="curValue" :placeholder="placeholder" @input="input" border="none" />
			<view class="list" v-if="isShow">
				<template v-if="list.length > 0">
					<view class="item" hover-class="item-hover" hover-stay-time="200" v-for="(item, i) in list" :key="i" @click="itemClick(item)">{{ item[label] }}</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'VagueSearch',
	props: {
		//placeholder内容
		placeholder: {
			type: String,
			default: '请输入内容',
			
		},
		//模糊查询到的列表（由后台返回）
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		//列表内要展示的内容 字段 默认name
		label: {
			type: String,
			default: () => {
				return 'name';
			}
		},
		// 当前类型
		type: {
			type: String,
			default: ''
		},
		value: {
			type: String,
		}
	},
	data() {
		return {
			isShow: false, //是否显示搜索到的列表
			curValue: '' //输入框绑定值
		};
	},
	watch: {
		list: {
			handler (newVal) {
				if (this.curValue === this.value && newVal.length == 1) {
					this.$emit('confirmValue', newVal[0]);
					this.close()
				} else {
					if (newVal.length && newVal.length > 0) {
						this.open()
					} else {
						this.close()
					}
				}
			},
			deep: true
		},
		value: {
			handler (newVal) {
			   this.curValue = newVal
			},
			immediate: true
		},
	},
	methods: {
		// 显示查询到的列表值
		open() {
			this.isShow = true;
		},
		// 隐藏查询到的列表值
		close() {
			this.isShow = false;
		},
		input(value) {
			if (!value) return
			this.curValue = value;
			this.$emit('getInputValue', {value: value, type: this.type});
		},
		itemClick(e) {
			this.curValue = e[this.label];
			this.close();
			this.$emit('confirmValue', e);
		}
	}
};
</script>

<style lang="scss" scoped>
.vagueSearch {
	width: 100%;
	.input {
		position: relative;
		.search-input {
			box-sizing: border-box;
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
		}

		.list {
			width: 100%;
			max-height: 300rpx;
			padding: 20rpx;
			background-color: #ffffff;
			box-shadow: 0 0 10rpx #888888;
			border-radius: 10rpx;
			z-index: 999;
			position: absolute;
			left: 0;
			overflow: scroll;

			.item {
				padding: 5rpx 0;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				margin: 5rpx 0;
			}

			.item-hover {
				background-color: #f5f5f5;
			}
		}
	}
}
</style>

组件使用

// html代码
<u-form-item>
	<VagueSearch
		placeholder="请输入工作地"
		:value="formData.workPlace"
		@getInputValue="getInputValue"
		:type="工作地"
		:list="vagueList"
		ref="vagueList"
		:label="placeName"
		@confirmValue="confirmValue" />
</u-form-item>
// js代码
// 模糊查询-输入信息
getInputValue(obj) {
	let {value, type} = obj
	switch (type) {
		case '1':
		break;
		case '2':
		break;
		case '3':
		break;
		case '4':
		break;
		case '工作地':
			debounce(this.workPlaceByCondition(value), 500)
		break;
	}			
},
// 工作地
workPlaceByCondition(value) {
	if (!this.optionArr.length) {
		this.$common._showToast('请先选择区域')
		return
	}
	workPlaceByCondition({
		placeName: value,
		pid: this.formData.pid,
		cid: this.formData.cid
	}).then(res => {
		if(res.data && res.data.length) {
			this.vagueList = res.data
			if (this.vagueList.length == 1 && this.vagueList[0].placeName == value) {
				this.formData.placeId = this.vagueList[0].id
				this.formData.workPlace = this.vagueList[0].placeName
			}
		} else {
			this.formData.workPlace = value
            this.vagueList = []
			this.$forceUpdate()
		}
	})
},
// 模糊查询选中
confirmValue(e) {
	if (this.authType == 1 || this.authType == 3) {
		// 工作地
		this.formData.placeId = e.id
		this.formData.workPlace = e.placeName
	}
},