收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来

做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关的客户,并把相关的客户信息全部显示出来,因为一个客户全部信息我写在一个div里面 所以显示的时候就是显示整个div。先看看实现的效果:

查看图片

当我输入瓦窑村 就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色, 其他的就不显示;下面看html代码:

<body>
 <div class="bar bar-header-secondary" style="top:0">
  <div class="searchbar">
   <a class="searchbar-cancel">取消</a>
   <div class="search-input">
    <label class="icon icon-search" for="search"></label>
    <input type="text" id="txtSearch" onChange="txtSearch()" placeholder="输入关键字...">
   </div>
  </div>
 </div>
 <div class="content" id="divMain" style="top:2.2em">
  <div class="card">
   <div class="card-header"><div>富民青泉假有限公司</div> <span>530124210342</span></div>
   <div class="card-content">
    <div class="card-content-inner">
     客户经理:卢燕洲<br>
     负责人:张仕城 <a href="tel:13187876969" rel="external nofollow" >12345698711</a>
     <br>
     地址:富民县东村镇乐在村委会乐在村张仕城
     <br>
     客户分档:二档
    </div>
   </div>
  </div>
    后面有n个<div class="card">这里就不重复了
    </div>
</body>

在我这里用的是onChange事件,这个根据个人的需要可以改;

 <style type="text/css">
  .changestyle{color:red;font-weight:600;}
 </style>
 <script type="text/javascript">
  function txtSearch()
  {
   //遍历移除b标签,防止第二次搜索bug
   $(".changestyle").each(function()
   {
     var xx=$(this).html(); 
     $(this).replaceWith(xx);
    });
   //整个客户信息div
   var str=$("#divMain").html();
   //文本输入框
   var txt=$("#txtSearch").val();
   //不为空
   if($.trim(txt)!="")
   {
    //定义b标签样式红色加粗
    var re="<b class='changestyle'>"+txt+"</b>";
    //替换搜索相关的所有内容
    var nn=str.replace( new RegExp(txt,"gm"),re);
    //赋值
    // document.getElementById("divMain").innerHTML=nn;
    $("#divMain").html(nn);
    //显示搜索内容相关的div
   $(".card").hide().filter(":contains('"+txt+"')").show(); 
   }
   else
   {
   $(".card").show();
   }
  }
 </script>

其实整体的思路是这样的:

1、先把要搜索的内容去html里面找,找到了就全部替换成<b class='changestyle'>"+搜索的内容+"</b>;changestyle里面的样式红色,加粗

2、再把包含整个内容的div显示出来$(".card").hide().filter(":contains('"+txt+"')").show(); card就是整个包含客户信息的div;

3、大家都知道这样改变了原来div的结构,里面春文本的变成了这样如果第二次输入的时候不把整个div恢复到加载页面的时候搜索就会出bug

查看图片

明显多了两个b标签 如果不遍历移除b标签我搜瓦窑村在搜村委会就这样

查看图片

就不会显示红色了;

4、个人学到的关键技术:移除标签,替换全部相关到的文本replace方法,显示需要的div(过滤)filter方法!

总结:其中遇到的问题不止这些还有很多的,上网查了很多资料,纸上得来终觉浅,总是一次一次不同想法不同思路解决不同bug出来的;这很基础,只要有想法有思路就去做,不会的百度,一个点一个点的来。日积月累的慢慢前进吧!

总结

以上所述是小编给大家介绍的前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

基于jQuery实现定位导航位置效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动

jQuery实现滚动效果
本文实例为大家分享了jQuery实现滚动效果展示的具体代码,供大家参考,具体内容如下1.图片轮播:原理如下:假设有三张图片,三张图片实际上都是存

基于jquery实现五星好评
在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title五角星评分案例/titlestyle*{padding:0;

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号