uni-app——模糊搜索

在这里插入图片描述

首先需要写一个输入框
然后给他绑定事件(根据自己实际需求来)
我这个是用到点击事件获取里面的值,当然你们也可以使用其他方法
在这里分享其他的一些方法

1.键盘输入触发事件

在这里插入图片描述
2.聚焦触发事件

在这里插入图片描述
3.失去聚焦触发事件

在这里插入图片描述
下面我们上代码
thml

<view class="grabble">
			<view class="grabble_view"><input type="text" v-model="valueaa" placeholder="输入姓名搜索" /></view>
			<view @click="grabble">搜索</view>
		</view>

样式就随便写了写,大家可以自由发挥
js

this.valueaa//输入框获取到的值
this.data//输出到页面的数组
this.dataa//接口获取的总数据


grabble() {
     
				if (this.valueaa === '') {
     
					//this.data是下拉框显示的内容,如果为空就展示全部数据
					this.data = this.dataa
					//否则执行下面内容dataa
				} else {
     
					//先清空展示的数据
					this.data = []
					//然后开始循环全部数据
					for (var i = 0; i < this.dataa.length; i++) {
     
						//判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
						//(核心所在,其它都是根据需求来自己写)
						if (this.dataa[i].account.indexOf(this.valueaa) >= 0) {
     
							console.log(this.dataa[i].account)
							//然后把它丢进要展示的数组里面
							this.data.push(this.dataa[i])
							console.log(this.data);
						}
					}
				}
			}

以上就是一个简单的模糊搜索。

你可能感兴趣的:(模糊搜索,前端)