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代码 ...
随机推荐
- NOIP模拟 24
连续爆炸的开端. 从这一场开始我没状态了 T1 star way to heaven 受强降雨boboQQQ影响,我一直认为这是一道和凸包有关的计算几何题 很快就弃了,除了期望没做过带实数的题,所以吓 ...
- Laravel用户认证
前期准备 Laravel的权限配置文件位于 config/auth.php,Laravel的认证组件由"guards"和"providers"组成, Guard ...
- JS中的两种数据类型以及实现引用类型的深拷贝
一.前言 我们知道,在JS中数据类型按照访问方式和存储方式的不同可分为基本类型和引用类型.基本类型基本类型有String.Boolean.Number,Undefined.Null,这些基本类型都是按 ...
- docker项目——搭建飞机大战小游戏
项目2:搭建打飞机小游戏,验证数据持久化(最底下有链接) 第一步:拉取镜像 [root@localhost docker-image]# docker load < httpd_img.tar. ...
- 对于 TCP 三次握手的理解
假设名叫 A 和 B 的两个人要进行通信,那么他们两人之间,首先要确保通信顺畅. 而确保通信顺畅,就要从 3 个维度,确定 8 个能力 3 个维度分别是: 1.人知道(A 知道.B 知道) 2.人(A ...
- 什么情况用ArrayList or LinkedList呢?
ArrayList 和 LinkedList 是 Java 集合框架中用来存储对象引用列表的两个类.ArrayList 和 LinkedList 都实现 List 接口.先对List做一个简单的了解: ...
- VsCode Python配置安装教程
1.软件下载地址 Python官网: https://www.python.org/downloads/windows/ Python下载地址: https://www.python.org/ftp/ ...
- 怎样用JS给,option添加“选中”属性
<html> <head> <script> window.onload = function(){ var opts = document.getElementB ...
- Linux下编写-makefile-详细教程(跟我一起写-Makefile-Markdown整理版)
目录 概述 关于程序的编译和链接 Makefile 介绍 Makefile的规则 一个演示例子 make是怎样工作的 makefile中使用变量 让make自己主动推导 另类风格的makefile 清 ...
- nyoj 58-最少步数 (BFS)
58-最少步数 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:17 submit:22 题目描述: 这有一个迷宫,有0~8行和0~8列: 1,1,1 ...