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

2019-11-19 14:56:23

字体：大中小

来源：转载

供稿：网友

做项目的时候有这么一个需求，客户信息显示出来后我要搜索查找相关的客户，并把相关的客户信息全部显示出来，因为一个客户全部信息我写在一个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