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 相关文章推荐
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
Angular2数据绑定详解
Apr 18 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
vue实现分页组件
Jun 16 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
php实现用户登陆简单实例
2017/04/04 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
极简的Python入门指引
2015/04/01 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Python Socket编程详细介绍
2017/03/23 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python excel多行合并的方法
2020/12/09 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
学历证明样本
2015/06/16 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
微信小程序调用python模型
2022/04/21 Python