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函数
Nov 20 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
vue 单页应用和多页应用的优劣
Oct 22 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 开发环境配置(Zend Studio)
2010/04/28 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP设置进度条的方法
2015/07/08 PHP
php字符集转换
2017/01/23 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
jQuery 技巧小结
2010/04/02 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
Sea.JS知识总结
2016/05/05 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
python enumerate函数的使用方法总结
2017/11/15 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
群众路线剖析材料
2014/09/30 职场文书
捐资助学感谢信
2015/01/21 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
旗帜观后感
2015/06/08 职场文书
绿里奇迹观后感
2015/06/15 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书