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 一些用法小结
Sep 11 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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解答方法
2012/02/04 PHP
php mail to 配置详解
2014/01/16 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
应届生个人求职信模板
2013/11/26 职场文书
军训自我鉴定
2013/12/14 职场文书
个人安全生产责任书
2014/07/28 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
校园广播稿100字
2014/10/06 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
简爱电影观后感
2015/06/10 职场文书
我是特种兵观后感
2015/06/11 职场文书