js的模糊查询
在项目中会用到模糊查询,之前在首页是用的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的模糊查询的更多相关文章
- 编写简易的JS输入框模糊查询匹配(附有源码和demo)
前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...
- js实现模糊查询
1.简述 实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现. 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询. 前端直接使用字符串的indexOf()方法或者正则表达 ...
- 模糊查询基于select遍历json文件自动填充的实现
HTML页面 <tr> <td align="left"><span>案由</span> <input type=" ...
- js—模糊查询
首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例 ...
- js前端实现模糊查询
对于模糊查询,一般都是传关键字给后端,由后端来做.但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验.废话不多说,直接上代码. //字符串方法indexOfvar len ...
- 前端js模糊搜索(模糊查询)
1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;&q ...
- js模糊查询案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js实现下拉框模糊查询
keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...
- 通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程
所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果.本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能. 首先得准备一个文本框和显示数据列表的div元素,html代码 ...
随机推荐
- 口胡题fr
T1五种贡献恶心的要死.$1.grand$$2.father$$3.brother$$4.son$$5.grandson$我们选择维护三个量.1.儿子和,$sx$2.孙子和,$gsx$3.自己的值,$ ...
- CSPS模拟 43
我这次把考试题改完了 T1 A 发现S*b必须和T模a同余? 貌似乘不了几次就爆T了?可以暴力? 也许乘的越多越好? 内心:切了 另外怎么设置鼠标指到黑块上边就显示字那种东西 最后当然是因为低错没有A ...
- map和set的使用及top K问题
1.map和set的应用和比较 map和set都是关联式容器,底层容器都是红黑树. map以键值对的形式进行存储,方便进行查找,关键词起到索引的作用,值则表示与索引相关联的数据,以红黑树的结构实现,插 ...
- npm start 的应用 改为forever 后台启动的方法记录
记录日志的启动方式 forever start -l forever.log -o out.log -e err.log app.js 记录日志的启动方式 forever start -a app.j ...
- 简述JMM
一.很多初学者分不清JMM和JVM的内存模型,本篇只是简要的谈一谈什么是JMM,并不深入探讨. 示意图A: 在多线程操纵共享资源时,并不是对资源本身进行的操作,而是将共享资源的副本复制了一份到自己的私 ...
- jdbc 加载数据库驱动如何破坏双亲委托模式
导读 通过jdbc链接数据库,是每个学习Java web 方向的人必然一开始会写的代码,虽然现在各路框架都帮大家封装好了jdbc,但是研究一下jdbc链接的套路还是很意义 术语以及相 ...
- python——自行实现sorted函数
仿照内建函数sorted,自行实现一个sort函数,能够为列表进行排序 看下面实例的前提是掌握 0.掌握sorted函数的用法.1.函数基本概念.2.函数是如何传参的.3.掌握三元表达式.4.掌握内建 ...
- 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作(续)---Harbor的安装
前期安装文档:https://www.cnblogs.com/lq-93/p/11828626.html Harbor的作用: 开发提交代码至gitlab容器中,Jenkins拉取代码构建镜像 ...
- Proxy动态代理-增强方法
增强对象的功能 设计模式:一些通用的解决固定问题的方式 装饰器模式 代理模式 概念: 在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模 ...
- C++中对封装的语法支持——友元
友元 1.友元就是授权给某个函数.每个成员函数.某个类具有访问类内部私有成员的权限. 2.为什么用友元?友元可以允许某个类.函数直接访问类内部私有数据,减少函数调用开销,提高效率. 3.友元函数不是成 ...