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 相关文章推荐
jcrop基本参数一览
Jul 16 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
详解一些适用于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+mysql写的简单留言本实例代码
2008/07/25 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
centos下更新Python版本的步骤
2013/02/12 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python 实现汉诺塔游戏
2020/11/28 Python
xml有哪些解析技术?区别是什么
2016/04/26 面试题
业务代表的岗位职责
2013/11/16 职场文书
小区门卫值班制度
2014/01/24 职场文书
售房委托书
2014/08/30 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
高质量“欢迎词”
2019/04/03 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技