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的简单的列表导航菜单
Mar 02 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
Django入门使用示例
2017/12/12 Python
Python中的heapq模块源码详析
2019/01/08 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python的命名规则知识点总结
2019/10/04 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python爬虫请求头的使用
2020/12/01 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
年终自我鉴定
2013/10/09 职场文书
全陪导游欢迎词
2014/01/17 职场文书
绩效工资分配方案
2014/01/18 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
三严三实心得体会范文
2014/10/13 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
国博复兴之路观后感
2015/06/02 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技