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 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php之readdir函数用法实例
2014/11/13 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
js实现抽奖的两种方法
2020/03/19 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python 反向输出字符串的方法
2018/07/16 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
信息管理专业自荐书
2014/06/05 职场文书
信息员培训方案
2014/06/12 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫