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 01 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
详解一些适用于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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php绘制一个矩形的方法
2015/01/24 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
node.js中watch机制详解
2014/11/17 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Python实现类继承实例
2014/07/04 Python
Python创建系统目录的方法
2015/03/11 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
使用python实现kNN分类算法
2019/10/16 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
高中军训感言200字
2014/02/23 职场文书
实验室标语
2014/06/21 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书