javascript 搜索并高亮显示
2015年12月22日 15:45:08 星期二
情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉
效果图:
html:
1 <div class="contracts-header">名称: <input type="text" value="" id="search_contract_name"></div> 2 <div class="contracts-header">代码: <input type="text" value="" id="search_contract_code" placeholder="不区分大小写"></div> 3 <div class="contracts-header"><button onclick="search()">查找</button></div> 4 5 <div id="contracts-list"> 6 <ul> 7 <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li> 8 <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li> 9 </ul> 10 </div>
javascript:
1 function search() 2 { 3 var search_contract_name = $("#search_contract_name").val(); 4 var search_contract_code = $("#search_contract_code").val(); 5 6 if (search_contract_name && search_contract_code) { //两个输入框都有值 7 search_contract_code = search_contract_code.toLowerCase(); //不区分大小写, 全部转换为小写, 下同 8 $("input[name='contract[]']").each( 9 function () { 10 var code_name = this.value; 11 var search_code = code_name.toLowerCase().indexOf(search_contract_code); 12 var search_name = code_name.toLowerCase().indexOf(search_contract_name); 13 if (search_code >=0 && search_name >=0 ) { 14 // this.nextSibling.style.backgroundColor = "#FFDEAD"; //高亮匹配到的 15 this.parentNode.style.display = 'block'; 16 } else { 17 // this.nextSibling.style.backgroundColor = ""; 18 this.parentNode.style.display = 'none'; //隐藏不匹配的 19 } 20 } 21 ); 22 } else if(search_contract_name || search_contract_code) { //只有一个输入框有值 23 search_contract_name = search_contract_name.length ? search_contract_name : 'xxx'; //默认为xxx是因为不可能存在xxx 24 search_contract_code = search_contract_code.length ? search_contract_code.toLowerCase() : 'xxx'; 25 $("input[name='contract[]']").each( 26 function () { 27 var code_name = this.value; 28 var search_code = code_name.toLowerCase().indexOf(search_contract_code); 29 var search_name = code_name.toLowerCase().indexOf(search_contract_name); 30 if (search_code >=0 || search_name >=0 ) { 31 // this.nextSibling.style.backgroundColor = "#FFDEAD"; 32 this.parentNode.style.display = 'block'; 33 } else { 34 // this.nextSibling.style.backgroundColor = ""; 35 this.parentNode.style.display = 'none'; 36 } 37 } 38 ); 39 } 40 }
javascript 搜索并高亮显示相关推荐
- html搜索时关键字变数字,JavaScript正则方法replace实现搜索关键字高亮显示
前言 正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法,和实现搜索关键字高亮的功能. 先 ...
- html 显示搜索结果,搜索结果高亮显示(不改变html标签)
一.问题的产生 搜索结果高亮显示,在新闻标题,来源之类的地方好做,只需要用str.Replace(keyword,"font style=/"color:red;/"&q ...
- C#中搜索关键词高亮显示
在搜索关键词高亮中一般的方法都是采用替换的办法(Replace)这个方法有一个缺点就是不能区分大小写的问题.在网上找了找发现有人用正则表达式的方法来解决这个问题还真不错,效率也比较高,归纳如下,有用得 ...
- JS实现HTM搜索关键词高亮显示
如何利用JS实现HTML搜索关键词高亮显示呢? 目录 一.程序案例代码 二.程序运行效果 一.程序案例代码 <!DOCTYPE html> <html lang="en&q ...
- Fuc-String-querysour 搜索结果高亮显示
//搜索结果高亮显示 querysour(str, searchStr) {let srtEndIndex = str.indexOf(searchStr) + searchStr.length;le ...
- 前端Vue开发,多关键字搜索时,搜索结果高亮显示(解决输入英文时,会错误的把html标签渲染的问题)
问题背景: 网上搜索关于搜索结果高亮显示,基本上都是单一关键字搜索,或者多关键字搜索,但是没有解决 输入英文字符时,把html标签渲染出来的问题,比如在进行多关键字搜索时,可能会进行a;s的搜索, 就 ...
- ElasticSearch highlight搜索结果高亮显示(英文检索)
高亮显示搜索结果(使用highlight) #高亮搜索结果 GET /lib3/user/_search {"query":{"match":{"in ...
- 搜索关键字高亮显示,就比微信多个多音字搜索
首先看下demo效果,下载地址 一. 需求要求实现的效果 汉字支持汉字直接搜索.拼音全拼搜索.拼音简拼搜索 搜索匹配到的关键字高亮显示 搜索结果优先显示全部匹配.其次是拼音全拼匹配.拼音简拼匹配:关键 ...
- 微信小程序 搜索 关键字 高亮显示
效果图: 将搜索结果挨个格式化为数组,然后在渲染的时候判断type是否等于1,如果等于1,那就高亮显示. 主要代码: <view class="address-title"& ...
- elasticsearch搜索关键字高亮显示
使用 elasticsearch 时,有一个很常见的需求是,能在页面上将搜索出的结果中属于关键字的文字,进行高亮显示. elasticsearch 对这个做了一定的支持,它能查询结果的基础上,额外返回 ...
最新文章
- log4j超详细讲解
- 简明docker教程 1
- aidl demo调用原理
- 浅谈ATP CHECK zz
- An ffmpeg and SDL Tutorial
- 在Spring Boot中实现相关ID(用于SOA /微服务中的分布式跟踪)
- python随机数模块_python 随机数模块 -- random
- 如何解决eclipse里面tomcat 8080端口被占用
- python redis 哨兵_Redis哨兵机制
- android电话系统,Android电话系统之-rild.doc
- 结合案件要素序列的罪名预测方法
- Java工作笔记-接入互联网的免费WebService
- 数据库零碎---常用的mysql命令,收藏了,方便查阅
- 还在用代码苦苦调试大屏?用这个神器1小时搞定
- css画三角形以及各种图形
- Android-NDK 接入Fmod库,变声操作
- 1. 什么是字符串(str)
- apt-get update 更新失败----如何清除破损而且陈旧的PPA仓库 (W: Failed to fetch http://ppa.launchpad.net/jonathonf/pyt)
- 零代码工具推荐 八爪鱼采集器
- c语言竖线什么意思,竖线符号意思
热门文章
- 6.1 tensorflow2实现WideDeep推荐系统——Python实战
- PyTorch:数据读取1 - Datasets及数据集划分
- 统计处理包Statsmodels: statistics in python
- Python代码测试 - unitest\doctest\nose\pytest
- linux普通用户修改root密码及获取root权限
- 力扣-692 前k个高频单词
- Android-【报错】java.lang.ClassCastException: .MainActivity cannot be cast to java.lang.Runnable
- L1-038 新世界 (5 分)—团体程序设计天梯赛
- (BUG记录)使用迭代器安全的删除处于循环下集合中的元素
- gitlab私服搭建