在项目中会用到模糊查询,之前在首页是用的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的模糊查询的更多相关文章

  1. 编写简易的JS输入框模糊查询匹配(附有源码和demo)

    前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...

  2. js实现模糊查询

    1.简述 实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现. 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询. 前端直接使用字符串的indexOf()方法或者正则表达 ...

  3. 模糊查询基于select遍历json文件自动填充的实现

    HTML页面 <tr> <td align="left"><span>案由</span> <input type=" ...

  4. js—模糊查询

    首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例 ...

  5. js前端实现模糊查询

    对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...

  6. 前端js模糊搜索(模糊查询)

    1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;&q ...

  7. js模糊查询案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js实现下拉框模糊查询

    keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...

  9. 通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程

    所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果.本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能. 首先得准备一个文本框和显示数据列表的div元素,html代码 ...

随机推荐

  1. CSPS_103

    被sdfz踩爆了! %%%kai586123 %%%Gekoo %%%sdfz_yrt T1 我以为是水题!一直在肝! 而且为什么每次我的考场暴力都是考后才调出来啊!! 先记录一下正解的大神做法: 按 ...

  2. [LLL邀请赛]参观路线(图论+dfs)

    emmmm....学校的oj被查水表了,扒不到原题面,所以.... 但是我还是扒到了题面... 题目大意:给定一个完全图,删掉其中一些边,然后求其字典序最小的遍历顺序 有点像去年day2T1啊.... ...

  3. P4568 [JLOI2011]飞行路线 分层图

    题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...

  4. vue , debounce 使用

    有时候不想直接在methods中的方法前面加debounce, getFullName: debounce(function() { console.log('my fullname is chent ...

  5. python内置模块collections介绍

    目录 python内置模块collections介绍 1.namedtuple 2.deque 3.defaultdict 4.OrderedDict 5.ChainMap 6.Counter 7.小 ...

  6. starUML 3.0.2文件 百度云

    文件百度云---链接:https://pan.baidu.com/s/1BVX9Ze40bkgd3k_4WFb99A 提取码:t7kj 使用方法:将starUML安装目录(一般为 C:\Program ...

  7. springboot封装JsonUtil,CookieUtil工具类

    springboot封装JsonUtil,CookieUtil工具类 yls 2019-9-23 JsonUtil public class JsonUtil { private static Obj ...

  8. lqb 基础练习 杨辉三角形

    基础练习 杨辉三角形 时间限制:1.0s   内存限制:256.0MB     问题描述 杨辉三角形又称Pascal三角形,它的第i+1行是(a+b)i的展开式的系数. 它的一个重要性质是:三角形中的 ...

  9. 你真的会用JavaScript中的sort方法吗

      在平时的业务开发中,数组(Array) 是我们经常用到的数据类型,那么对数组的排序也很常见,除去使用循环遍历数组的方法来排列数据,使用JS数组中原生的方法 sort 来排列(没错,比较崇尚JS原生 ...

  10. BloomFilter在Hudi中的应用

    Bloom Filter在Hudi中的应用 介绍 Bloom Filter可以用于检索一个元素是否在一个集合中.它的优点是空间效率和查询时间都远远超过一般的算法,主要缺点是存在一定的误判率:当其判断元 ...