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编程起步(第五课)
Jan 10 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
Javascript中With语句用法实例
May 14 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php二维数组排序详解
2013/11/06 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
网站上面有这种切换效果
2006/06/26 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
django 控制页面跳转的例子
2019/08/06 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
经典洗发水广告词
2014/03/13 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
企业催款函范本
2015/06/24 职场文书
公司员工培训管理制度
2015/08/04 职场文书
医德医风学习心得体会
2016/01/25 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS