实现原理:
利用js的 indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置。
模板中的代码
<div class="search">
<!--输入框使用的是vant的输入框组件-->
<van-search
@input="autoSearch"
v-model="value"
placeholder="请输入搜索关键词"
style="width:90%; display:inline-block;"
/>
<span>搜索</span>
</div>
<!--展示数据-->
<ul
v-for="(item) in allArea"
:key="item.communityId"
>
<li v-if="allNewArea.length != 0">{{ item.communityName }}</li>
<li v-else>{{ item.communityName }}</li>
</ul>
js代码
getAreaDetail () { // 获取数据
this.$http({
method: 'post',
url: '/appProperty/getCommunity',
}).then(res => {
this.allArea = res.data
this.allNewArea = res.data
})
},
autoSearch () { // 模糊搜索加节流（500ms触发一次）
var allowPass = true
if (!allowPass) {
return
}
setTimeout(() => {
allowPass = false
this.allArea = [];
this.allNewArea.filter(item => {
if (item.communityName.indexOf(this.value) !== -1) { // 此处也可使用js的 search 方法实现indexOf 一样效果
this.allArea.push(item);
}
})
}, 500);
},
拓展
节流函数 节省流量节省内存性能的一种函数，可以理解为是一种性能优化方案
//首先定义一个全局变量 当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
var canRun = true;
window.onresize = function () {
if (!canRun) {
return
}
canRun = false//设置一个定时器进行轮询操作
setTimeout(function () {//这是要做的事情
console.log("函数节流")//最后记得重新赋值true继续让他取反
canRun = true//每隔1000毫秒也就是1秒钟就执行一次
}, 1000)
}
防抖函数 当事件触发完成之后再延迟触发，并且只触发一次；如果在触发完成之前再次触发，则会再次刷新延迟
//定义方法即要做的事情
function fun(){
console.log('onresize')
}
//定义事件触发要执行的方法，两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce (fn, delay) { //定义一个变量作为等会清除对象
var handle; //这里用到了闭包，一个函数里面return另一个函数，变量相互牵引导致垃圾回收机制不会销毁handle变量
return function () { //在这里一定要清除前面的定时器，然后创建一个新的定时器
clearTimeout(handle) //最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发（这里的变量赋值是跟定时器建立连接，进行地址赋值，一定要重新赋值给handle
handle = setTimeout(function () {
fn()
}, delay)
}
}
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 500));
两者区别
