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中的模糊查询功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关推荐
-
Node.js对MongoDB数据库实现模糊查询的方法
前言 模糊查询是数据库的基本操作之一,实现对给定的字符串是否与指定的模式进行匹配.如果字符完全匹配,可以用=等号表示,如果部分匹配可认为是一种模糊查询.在关系型数据中,通过SQL使用like '%fens%'的语法.那么在mongodb中我们应该如何实现模糊查询的效果呢. 目录 mongodb模糊查询 nodejs通过mongoose的模糊查询 1. mongodb模糊查询 我们打开mongodb,以name文字字段进行测试. 精确查询 当{'name':'未来警察'}时,精确匹配到一条记录.
-
js模糊查询实例分享
首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例子没有接触到后台数据的知识,只是查询当前表格中每一行所包含的关键字. 用到的方法为:string.indexOf(''); 找出字符串中某个字符的位置,而如果没有目标字符会返回-1. 实现代码: <meta charset="UTF-8"> <title></
-
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: <span style="font-size:14px;"> <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY
-
JS Select下拉框(支持输入模糊查询)
本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <Script Language="Javascript"> f
-
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
注:添加球员的功能无指定技术要求,添加球员的页面也无具体样式要求. 1.实现上图页面所有元素,页面布局规整,跟上图效果一致 2.实现文案显示,按效果显示 3.实现查询,实现查询敏感词过滤,实现查询后列表变化 4.实现倒序,实现正序,下拉列表排序效果都实现 5.按钮背景一致,按钮样式 6.实现添加球员页面,添加球员页面样式,添加球员功能,添加球员必填项判断,添加完球员后能显示在表格内,已存在球员判重. 7.表格样式跟上图样式一致 代码: <!DOCTYPE html> <html lang
-
JS实现模糊查询带下拉匹配效果
"搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮助. ---搜索框模糊查询带下拉匹配效果html--- <!------------搜索框模糊查询带下拉匹配效果html----------------------> <div class="gover_search"> <div class="go
-
JS中的模糊查询功能
在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用 但上次的项目中 又涉及到不试用插件的模糊搜索,使用原生来搜索,其实网上有很多种,但个人觉得正则还是好用,不区别大小写很方便,之前看网上测评速度,正则的速度也挺快的, <input type="text" v-model="textData" /> data() { return { t
-
vue和js中实现模糊查询方式
目录 vue和js实现模糊查询 如何实现? 方法1 方法2 方法3 正则表达式实现模糊查询 vue和js实现模糊查询 先来看效果图 这种数据量少的场景适用于前端实现模糊查询 如何实现? <template> <div class="container"> <div class="search-bar"> <el-input v-model="inputVal" placeholder="请输入图
-
Mybatis中的like模糊查询功能
1. 参数中直接加入%% param.setUsername("%CD%"); param.setPassword("%11%"); <select id="selectPersons" resultType="person" parameterType="person"> select id,sex,age,username,password from person where true &
-
Angular实现下拉框模糊查询功能示例
本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"
-
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
本文实例讲述了Angular实现的内置过滤器orderBy排序与模糊查询功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular模糊查询.排序</title> <style> *{ ma
-
基于jQuery使用Ajax动态执行模糊查询功能
使用Ajax动态执行模糊查询功能 •必须:需要一个执行查询的接口: 说明: 1.搜索模块仅仅使用了boostrap的样式以及Jquery.js文件 2.因为我使用的layui的弹出层里面做的搜索ifram,所以确定和取消按钮的关闭当前页面的功能都是layui的方式,如果不是ifram的窗口仅仅在当前窗口执行的情况下,可以使用下面的语句来进行关闭当前页面的操作: window.opener=null; window.open('','_self'); window.close(); 效果展示: 引
-
hibernate的分页模糊查询功能
在web项目中,显示数据一般采用分页显示的,在分页的同时,用户可能还有搜索的需求,也就是模糊查询,所以,我们要在dao写一个可以分页并且可以动态加条件查询的方法.分页比较简单,采用hibernate提供的分页,动态条件采用map("字段",模糊值)封装查询条件,map可以添加多个查询条件,是个不错的选择,从而达到实现分页并模糊查询. @Override public List<T> findPage(int page, int length, Map<String,
-
java实现的连接数据库及模糊查询功能示例
本文实例讲述了java实现的连接数据库及模糊查询功能.分享给大家供大家参考,具体如下: 模糊查询是比较常见的一种查询方式,例如在订单表中,包含有订单的具体日期.如果要查询某年某月的订单信息,最好的方式就是使用模糊查询.进行模糊查询需要使用关键字LIKE.在使用LIKE关键字进行模糊查询时,可以使用通配符"%",来代替0个或者多个字符,使用下划线_来代表一个字符. 注释:需要注意的是在使用LIKE的时候,后面的查询条件需要加 ' ',英文状态下的单引号引起来,不然报错如下 You ha
随机推荐
- Response.Flush的使用心得
- Windows Live Writer 实现代码高亮
- javascript实现yield的方法
- win2003 服务器安全设置图文教程
- PHP正则表达式抓取某个标签的特定属性值的方法
- 有趣的bootstrap走动进度条
- jQuery get和post 方法传值注意事项
- 二叉查找树的插入,删除,查找
- CentOS7 docker服务无法启动解决方案及实现步骤
- python实现数通设备tftp备份配置文件示例
- javascript Deferred和递归次数限制实例
- 使用jQuery操作HTML的table表格的实例解析
- 15个初学者必看的基础SQL查询语句
- jQuery实现鼠标经过事件的延时处理效果
- js判断当前页面用什么浏览器打开的方法
- VBS 硬盘读写统计(分区读写统计)
- C语言中#define与typedef的互换细节详解
- PHP使用递归方式列出当前目录下所有文件的方法
- Spring Boot集成ElasticSearch实现搜索引擎的示例
- 浅谈Zookeeper开源客户端框架Curator