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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
JavaScript基本对象
2007/01/11 Javascript
JQuery小知识
2010/10/15 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
vue--vuex详解
2019/04/15 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python中文件操作简明介绍
2015/04/13 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python pass详细介绍及实例代码
2016/11/24 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python基础教程之异常详解
2019/01/10 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Python何时应该使用Lambda函数
2019/07/02 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
校园之声广播稿
2014/01/31 职场文书
二十年同学聚会感言
2015/07/30 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书