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 相关文章推荐
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
教你部署vue项目到docker
Apr 05 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python 加密与解密小结
2018/12/06 Python
python写程序统计词频的方法
2019/07/29 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python3中for循环踩过的坑记录
2020/12/14 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
护理专科自荐书范文
2014/02/18 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
小学语文教师研修日志
2015/11/13 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python