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中number转换成string介绍
Dec 31 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
Three.js学习之网格
Aug 10 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
详解一些适用于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分页示例分享
2014/04/30 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python中optparser库用法实例详解
2018/01/26 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python3数字求和的实例
2019/02/19 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
节约用水倡议书
2014/04/16 职场文书
供应链金融服务方案
2014/05/25 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
宣传部部长竞选稿
2015/11/21 职场文书