uniapp 模糊搜索(小白必看)

实现模糊搜索很简单,按照下面的步骤:

1. 搜索栏


			
		

2.用input 事件获取搜索的内容, 这里用到了 防抖, 把获取到的值 赋值给 this.search

	// 搜索
			input(e) {
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器,并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					// 如果 500 毫秒内,没有触发新的输入事件,则为搜索关键词赋值
					this.search = e; // 获取输入的搜索关键字
				}, 500)
			},

  记得在data 里面 添加 search : "  "

3. 使用计算属性, 将原来的数组进行筛选,   获取新的数据 , 绑定到页面渲染数据的地方

	computed: {
			filteredList() {
				return this.getAssetsList.filter((item) => {
					// 根据多种类型来搜索
					return item.deptName.includes(this.search) || item.requestNick.includes(this
						.search) || item.mdeptName.includes(this.search) || item.createTime.includes(this.search)
				})
			}
		},

uniapp 模糊搜索(小白必看)_第1张图片

includes  包含的内容是根据后端返回的数据 来的 ,可以根据搜索的内容进行修改

uniapp 模糊搜索(小白必看)_第2张图片

你可能感兴趣的:(uni-app)