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代码 ...
随机推荐
- C++学习笔记8_零碎的知识
1. int main(void) { int arr[] = {1,2,3,4}; //数组的长度 int len = sizeof(arr)/sizeof(int); //由此可以看出,sizeo ...
- Kong05-Kong 的健康检查和监控
您可以让 Kong 代理的 API 使用 ring-balancer , 通过添加包含一个或多个目标实体的upstream 实体来配置,每个目标指向不同的IP地址(或主机名)和端口.ring-bala ...
- 解决MacOs 下的 matplotlib 中文字体乱码
在使用 matplotlib 时候,如果表中有中文字体,那么可能会出现无法显示的情况,原因是因为缺少中文字体,可以使用以下步骤解决. 查看 matplotlib 的位置 matplotlib.matp ...
- 轰炸行动(bomb):tarjan,拓扑排序
考场上看错题,没什么好说的. 然而它就是一个大板子. 发的题解勉强还能看.但是我还想再讲讲. 题目的表述是,如果从A能直接或间接到B,那么就不能同时轰炸A和B. 那么我们从图里随便拽出一条有向路径,从 ...
- Oracle“ORA-00911: 无效字符”解决方式
在工作中碰到ORA-00911:无效字符的问题, 代码如下: <select id="querySendMsg" parameterType="map" ...
- 通俗易懂了解React生命周期
1.前言 学习React时,学习组件的生命周期是非常重要的,了解了组件的"从无到有再到无"所经历的各个状态,对日后写高性能的组件会有很大的帮助. 2.生命周期图 React的生命周 ...
- 『题解』洛谷P1314 聪明的质监员
更好的阅读体验 Portal Portal1: Luogu Portal2: LibreOJ Portal3: Vijos Description 小T是一名质量监督员,最近负责检验一批矿产的质量.这 ...
- Flash、RAM、ROM的区别
一. ROM(Read Only Memory) ROM(Read Only Memory),只读存储器.用来存储和保存数据.ROM数据不能随意更新,但是在任何时候都可以读取.即使是断电,ROM ...
- IPv6笔记-地址结构与分类
1.地址基础 IPv6地址由被划分为8个16位块的128位组成. 然后将每个块转换为由冒号符号分隔的4位十六进制数字. 2001::3238:00E1:0063:0000:0000:FEFB 每一块多 ...
- vm虚拟机安装linux centos教程
1 下载64btnhttp://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1810.iso 2 vm注意选择cen ...