vue输入框使用模糊搜索功能的实现代码


Posted in Javascript onMay 26, 2020

实现原理:

利用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));

两者区别

  • 防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;
  • 防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;

总结

到此这篇关于vue输入框使用模糊搜索功能的实现代码的文章就介绍到这了,更多相关vue输入框模糊搜索内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
详解Vue This$Store总结
Dec 17 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
jQuery弹框插件使用方法详解
May 26 #jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 #Javascript
微信小程序实现弹框效果
May 26 #Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
详解JSON.stringify()的5个秘密特性
May 26 #Javascript
微信小程序实现简单文字跑马灯
May 26 #Javascript
微信小程序实现带放大效果的轮播图
May 26 #Javascript
You might like
php编程每天必学之验证码
2016/03/03 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
vue 实现的树形菜的实例代码
2018/03/19 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python中强大的format函数实例详解
2018/12/05 Python
python实现控制台打印的方法
2019/01/12 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python json格式化打印实现过程解析
2020/07/21 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
自我鉴定注意事项
2014/01/19 职场文书
运动会稿件300字
2014/02/14 职场文书
大学生演讲稿
2014/04/25 职场文书
电子商务实训报告总结
2014/11/05 职场文书
暑期家教宣传单
2015/07/14 职场文书
《给予树》教学反思
2016/03/03 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers