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 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
JS关键字变色实现思路及代码
2013/02/21 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
python中的闭包函数
2018/02/09 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
python实现自动打卡的示例代码
2020/10/10 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
七年级政治教学反思
2014/02/03 职场文书
行政助理工作职责范本
2014/03/04 职场文书
座谈会主持词
2014/03/20 职场文书
公司口号大全
2014/06/11 职场文书
企业口号大全
2014/06/12 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
放假通知范文
2015/04/14 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
python 爬取华为应用市场评论
2021/05/29 Python