uniapp实现下拉框模糊查询

uni-app下拉框模糊查询功能实现

使用uView的Popup弹出层组件实现下拉列表模糊查询功能。

实现效果

实现思路

1、表单中输入框加入点击事件，点击触发事件，调用Popup弹出下拉框。

2、Popup弹出下拉框默认展示下拉列表，并在下拉列表上面加入搜索框。

3、搜索框输入文本内容，回车调用模糊查询方法。在方法中获取搜索框输入的值，将搜索框输入值与列表数据进行比较，实现模糊查询效果。

搜索框模糊查询方法
filterWarehouseList() {
	//获取当前搜索框输入值
	let keyword = this.searchWarehouseText.trim().toLowerCase();
	//进行模糊查询，将搜索框输入值与下拉列表进行比较。
	if (keyword) {
		this.supplierData = this.supplierData.filter(warehouse => warehouse.text
			.toLowerCase()
			.includes(
				keyword));
	} else {
		//查询为空的时候，展示所有列表
		this.supplierData = this.showWarehouseList;
	}
},

4、查询到数据之后，点击当前行数据，将数据赋值给表单输入框。

选中下拉列表数据，对下拉框进行赋值
selectWarehouse(item) {
	this.selectedWarehouse = item;
	this.bodyData.FSrcStockFNumber = this.selectedWarehouse.text;
	this.Warehouse = []
	this.Warehouse.push(item.text)
	this.showPopupWarehouse = false;
},

5、关闭下拉列表弹窗，是否显示弹出层：:show=“showPopupWarehouse = false”。

取消按钮，关闭下拉框弹窗
closePopup() {
	this.showPopupWarehouse = false;
},

6、完整示例代码如下，属性自己定义。

---搜索框部分---
<u-search class="searchSytle" shape="round" :animation="false" actionText=""
	:actionStyle="{display: 'none'}" v-model="searchWarehouseText" @search="filterWarehouseList">
</u-search>

---弹出下拉框部分---
<u-popup :show="showPopupWarehouse" position="bottom" @close="close">
	<view class="popup-content">
		<u-search class="searchSytle" shape="round" :animation="false" actionText=""
			:actionStyle="{display: 'none'}" v-model="searchWarehouseText" @search="filterWarehouseList">
		</u-search>
		<scroll-view scroll-y style="height: 300px;">
			<u-grid :col="1">
				<u-grid-item v-for="(item, index) in supplierData" :key="index"
					@click="selectWarehouse(item)" class="user-item">
					<view>
						<span class="user-name" v-if="item.text">{{ item.text }}</span>
						<span class="user-name" v-else>暂无数据</span>
					</view>
				</u-grid-item>
			</u-grid>
		</scroll-view>
		<!-- 添加取消按钮 -->
		<button @click="closePopup">取消</button>
	</view>
</u-popup>

---输入框部分---
<u-form-item label="供应商:" labelWidth="80px">
	<view class="input-row">
		<view @click="showGys">
			<u-input type="text" v-model="bodyData.FSrcStockFNumber" placeholder="请选择供应商":disabled="false">
			</u-input>
		</view>
		<u-icon :customStyle="{paddingLeft: '10%'}" name="scan"></u-icon>
	</view>
</u-form-item>


//搜索框模糊查询方法
<script>
filterWarehouseList() {
	//获取当前搜索框输入值
	let keyword = this.searchWarehouseText.trim().toLowerCase();
	//进行模糊查询，将搜索框输入值与下拉列表进行比较。
	if (keyword) {
		this.supplierData = this.supplierData.filter(warehouse => warehouse.text
			.toLowerCase()
			.includes(
				keyword));
	} else {
		//查询为空的时候，展示所有列表
		this.supplierData = this.showWarehouseList;
	}
},

//选中下拉列表数据，对下拉框进行赋值
selectWarehouse(item) {
	this.selectedWarehouse = item;
	this.bodyData.FSrcStockFNumber = this.selectedWarehouse.text;
	this.Warehouse = []
	this.Warehouse.push(item.text)
	this.showPopupWarehouse = false;
},

//取消按钮，关闭下拉框弹窗
closePopup() {
	this.showPopupWarehouse = false;
},
</script>