JavaScript实现的搜索及高亮显示功能示例


Posted in Javascript onAugust 14, 2017

本文实例讲述了JavaScript实现的搜索及高亮显示功能。分享给大家供大家参考,具体如下:

情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉

效果图:

JavaScript实现的搜索及高亮显示功能示例

html:

<div class="contracts-header">名称: <input type="text" value="" id="search_contract_name"></div>
<div class="contracts-header">代码: <input type="text" value="" id="search_contract_code" placeholder="不区分大小写"></div>
<div class="contracts-header"><button onclick="search()">查找</button></div>
<div id="contracts-list">
  <ul>
  <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
  <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
  </ul>
</div>

javascript:

function search()
{
  var search_contract_name = $("#search_contract_name").val();
  var search_contract_code = $("#search_contract_code").val();
  if (search_contract_name && search_contract_code) { //两个输入框都有值
    search_contract_code = search_contract_code.toLowerCase(); //不区分大小写, 全部转换为小写, 下同
    $("input[name='contract[]']").each(
        function () {
          var code_name = this.value;
          var search_code = code_name.toLowerCase().indexOf(search_contract_code); 
          var search_name = code_name.toLowerCase().indexOf(search_contract_name);
          if (search_code >=0 && search_name >=0 ) {
            // this.nextSibling.style.backgroundColor = "#FFDEAD"; //高亮匹配到的
            this.parentNode.style.display = 'block';
          } else {
            // this.nextSibling.style.backgroundColor = "";
            this.parentNode.style.display = 'none'; //隐藏不匹配的
          }
        }
    );
  } else if(search_contract_name || search_contract_code) { //只有一个输入框有值
    search_contract_name = search_contract_name.length ? search_contract_name : 'xxx'; //默认为xxx是因为不可能存在xxx
    search_contract_code = search_contract_code.length ? search_contract_code.toLowerCase() : 'xxx';
    $("input[name='contract[]']").each(
      function () {
        var code_name = this.value;
        var search_code = code_name.toLowerCase().indexOf(search_contract_code);
        var search_name = code_name.toLowerCase().indexOf(search_contract_name);
        if (search_code >=0 || search_name >=0 ) {
          // this.nextSibling.style.backgroundColor = "#FFDEAD";
          this.parentNode.style.display = 'block';
        } else {
          // this.nextSibling.style.backgroundColor = "";
          this.parentNode.style.display = 'none';
        }
      }
    );
  }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 #Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 #Javascript
JS原生数据双向绑定实现代码
Aug 14 #Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
关于在mongoose中填充外键的方法详解
Aug 14 #Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 #Javascript
jQuery:unbind方法的使用详解
Aug 14 #jQuery
You might like
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php常用文件操作函数汇总
2014/11/22 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
javascript比较文档位置
2008/04/08 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python 统计列表中不同元素的数量方法
2018/06/29 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
安全员岗位职责
2013/11/11 职场文书
保安队长职务说明书
2014/02/23 职场文书
工程质量承诺书
2014/03/27 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
2014年班级工作总结
2014/11/14 职场文书
三好学生评语大全
2014/12/29 职场文书
家属答谢词
2015/01/05 职场文书
禁毒心得体会范文
2016/01/15 职场文书