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 Event学习第七章 事件属性
Feb 07 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
详谈javascript中的cookie
Jun 03 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
python中dir函数用法分析
2015/04/17 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python中安装easy_install的方法
2018/11/18 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
男女朋友协议书
2014/04/23 职场文书
融资租赁计划书
2014/04/29 职场文书
出国导师推荐信
2015/03/25 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
python使用BeautifulSoup 解析HTML
2022/04/24 Python
Hive常用日期格式转换语法
2022/06/25 数据库