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

时间：2017-11-14 14:50:54 阅读：252 评论：0 收藏：0 [点我收藏+]

标签：效果分享 car jquery body put pre 一个 enter

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