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入门学习书籍推荐
Jun 12 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
音乐教学反思
2014/02/02 职场文书
高中生的自我评价
2014/03/04 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
2014财务年终工作总结
2014/12/08 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis