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 var变量隐式声明方法
Oct 19 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 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
论坛头像随机变换代码
2006/10/09 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
入党自我鉴定范文
2013/10/04 职场文书
人力资源行政经理自我评价
2013/10/23 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
商铺门前三包责任书
2014/07/25 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书