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 17 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
给js文件传参数(详解)
Jul 13 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
bootstrap表单示例代码分享
May 18 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
vue离开当前页面触发的函数代码
Sep 01 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
php判断ip黑名单程序代码实例
2014/02/24 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python获取array中指定元素的示例
2019/11/26 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
举例说明类变量和实例变量的区别
2016/06/30 面试题
采购员的工作职责
2013/12/26 职场文书
会计演讲稿范文
2014/05/23 职场文书
法人委托书
2014/07/31 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
2015小学师德工作总结
2015/07/21 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
详解SQL的窗口函数
2022/04/21 Oracle
Redis唯一ID生成器的实现
2022/07/07 Redis