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 多级下拉菜单核心代码
May 21 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
屏蔽script注入小例子
Nov 12 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
Vue指令实现OutClick的示例
Nov 16 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php命名空间学习详解
2014/02/27 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python中调用其他程序的方式详解
2019/08/06 Python
pytest中文文档之编写断言
2019/09/12 Python
Python多线程多进程实例对比解析
2020/03/12 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
陈欧广告词
2014/03/14 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
党支部工作总结2015
2015/04/01 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python