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 相关文章推荐
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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
example2.php
2006/10/09 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Laravel下生成验证码的类
2017/11/15 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
JS如何生成动态列表
2020/09/22 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python实现GIF图倒放
2020/07/16 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
挂牌仪式主持词
2014/03/20 职场文书
市场策划求职信
2014/08/07 职场文书
长城英文导游词
2015/01/30 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
MySQL 分页查询的优化技巧
2021/05/12 MySQL