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