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代码 ...
随机推荐
- [考试反思]1025csp-s模拟测试87:生存
想起一句话 课上求生存,课下求发展 发展还好说,如何生存? 生存很困难... 没什么可抱怨的.有AK的.高分的也很多. 该说的在<Dust>里说完了,安静会吧. 这场rank43怎么追? ...
- 正睿OI集训游记
什么嘛....就是去被虐的... 反正就是难受就是了.各种神仙知识点,神仙题目,各式各样的仙人掌..... 但是还是学会了不少东西...... 应该是OI生涯最后一次集训了吧.... 这次的感言还是好 ...
- Subline Text3最新激活方法解决 That license key doesn't appear to be valid.
第一步: 管理员身份登录系统 第二步: 进入到 C:\Windows\System32\drivers\etc (这个路径可以复制,都是一样的) 第三步: 右键hosts这个文件(打开方式 - 选择记 ...
- jQuery源码分析--为什么在参数列表中传入undefined
(function(window, undefined){ //jQuery code; })(window); 为什么要传入undefined? 1.没有传入undefined: <!DOCT ...
- Java ->在mybatis和PostgreSQL Json字段作为查询条件的解决方案
Date:2019-11-15 读前思考: 你没想到解决办法? PostgreSQL 数据库本身就支持还是另有解决办法? 说明:首先这次数据库使用到Json数据类型的原因,这次因为我们在做了一个app ...
- 微服务SpringCloud之GateWay熔断、限流、重试
纯洁的微笑的Spring Cloud系列博客终于学完了,也对Spring Cloud有了初步的了解. 修改请求路径的过滤器 StripPrefix Filter 是一个请求路径截取的功能,我们可以利用 ...
- yum 配置文件 以及 语法
yum的配置文件 #vi /etc/yum.conf [main] cachedir=/var/cache/yum/$basearch/$releasever keepcache= debugleve ...
- 星际争霸2 AI开发(持续更新)
准备 我的环境是python3.6,sc2包0.11.1 机器学习包下载链接:pysc2 地图下载链接maps pysc2是DeepMind开发的星际争霸Ⅱ学习环境. 它是封装星际争霸Ⅱ机器学习API ...
- man 与 help
man帮助文档被划分为节 序号 节号 说明 1 1 命令帮助信息 2 2 系统调用函数的帮助信息(内核提供的接口函数) 3 3 库函数帮助信息 4 4 设备文件帮助信息 5 5 配置文档帮助说明 6 ...
- 万恶之源-与python的初识
1.计算机基础知识 1.cpu: 人类的大脑 运算和处理问题 2.内存: 临时存储数据 断电就消失了 3.硬盘: 永久 存储数据 4.操作系统:是一个软件 控制每个硬件之间数据交互 2 ...