首先需要写一个输入框
然后给他绑定事件(根据自己实际需求来)
我这个是用到点击事件获取里面的值,当然你们也可以使用其他方法
在这里分享其他的一些方法
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);
}
}
}
}
以上就是一个简单的模糊搜索。