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 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
带你了解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
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
浅谈php提交form表单
2015/07/01 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
javascript实现动态标签云
2015/10/16 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python编程开发之日期操作实例分析
2015/11/13 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
在python中pandas的series合并方法
2018/11/12 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python代码如何注释
2020/06/01 Python
python中实现栈的三种方法
2020/12/19 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
Weblogic的布署方式
2013/08/23 面试题
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
商务助理岗位职责
2013/11/13 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
目标管理责任书
2014/04/15 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
辞职信标准格式
2015/02/27 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电