源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2017-8-14 12:09:45 | 显示全部楼层 |阅读模式
这篇文章主要介绍了JavaScript实现的搜索及高亮显示功能,涉及javascript字符遍历与页面元素属性相关操作技巧,需要的朋友可以参考下

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

情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用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数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结

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

回复

使用道具 举报

8

主题

2万

回帖

52

积分

注册会员

Rank: 2

积分
52
发表于 2022-10-29 12:53:20 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

146

积分

注册会员

Rank: 2

积分
146
发表于 2022-11-2 10:32:10 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2022-11-29 14:20:33 | 显示全部楼层
人都不在了啊 啊
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-12-15 19:39:13 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-1-31 19:52:03 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-4 18:58:18 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-10-28 19:33:47 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

79

积分

注册会员

Rank: 2

积分
79
发表于 2024-3-8 16:00:00 | 显示全部楼层
hi哦回复iOS就看见
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-4-20 01:16:10 | 显示全部楼层
啦啦啦啦啦啦哈哈哈
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-12-2 10:40 , Processed in 0.106211 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表