首页 >> js开发 >> jsvue输入框使用模糊搜索功能的实现代码js大全
jsvue输入框使用模糊搜索功能的实现代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
实现原理:实现原理:实现原理利用js的 indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置。模板中的代码
@input="autoSearch"
v-model="value"
placeholder="请输入搜索关键词"
style="width:90%; display:inline-block;"
/>
搜索
@input="autoSearch"
v-model="value"
placeholder="请输入搜索关键词"
style="width:90%; display:inline-block;"
/>
搜索
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);
},
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)
}
//首先定义一个全局变量 当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
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));
//定义方法即要做的事情
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));两者区别两者区别两者区别
防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;
防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;
防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;总结总结总结
@input="autoSearch"
v-model="value"
placeholder="请输入搜索关键词"
style="width:90%; display:inline-block;"
/>
搜索
- {{ item.communityName }}
- {{ item.communityName }}
v-for="(item) in allArea"
:key="item.communityId"
>
@input="autoSearch"
v-model="value"
placeholder="请输入搜索关键词"
style="width:90%; display:inline-block;"
/>
搜索
- {{ item.communityName }}
- {{ item.communityName }}
v-for="(item) in allArea"
:key="item.communityId"
>
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);
},
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)
}
//首先定义一个全局变量 当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
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));
//定义方法即要做的事情
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));两者区别两者区别两者区别
防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;
防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;
防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;总结总结总结
相关文章:
- js解决父组件将子组件作为弹窗调用只执行一次created的问题js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vuex数据页面刷新后初始化操作js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsElement Input输入框的使用方法js大全
- js关于angular浏览器兼容性问题的解决方案js大全
- JavaScriptthree.js欧拉角和四元数的使用方法