JS中的模糊查询功能


Posted in Javascript onDecember 08, 2019

在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用

但上次的项目中 又涉及到不试用插件的模糊搜索,使用原生来搜索,其实网上有很多种,但个人觉得正则还是好用,不区别大小写很方便,之前看网上测评速度,正则的速度也挺快的,

<input type="text" v-model="textData" />

data() {
  return {
   textData: ""
  };
 },


 watch: {
  textData(val, arr) {
   console.log(val, arr); //val改变就可实时获取值 arr是要检测的数组
   if (val) {
    let reg = new RegExp(val, "gi");
    for (let i = 0; i < arr.length; i++) {
     arr[i].forEach(item => {
      if (!reg.test(item.name)) {
       item.checked = false; //模糊查询之后要执行的代码
      }
     });
    }
   }
  }
 }

总结

以上所述是小编给大家介绍的JS中的模糊查询功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
js实现中文实时时钟
Jan 15 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
详解一些适用于Node.js的命名约定
Dec 08 #Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 #Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 #Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 #Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 #Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 #Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 #Javascript
You might like
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
JS作用域链详解
2017/06/26 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python爬虫获取多页天涯帖子
2018/02/23 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
高中化学教学反思
2014/01/13 职场文书
村党支部书记承诺书
2014/05/29 职场文书
市场营销专业求职信
2014/06/17 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang