正文

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

魏杨杨  2022-02-10  230

关键词：

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

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

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

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

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

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

就不会显示红色了；

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

jquery实现简单的搜索

对一个简单的ul列表进行输入框的搜索功能，搜索之前及搜索后显示效果如下：用到的主要jquery技术有filter()和match()方法以及正则匹配，基础HTML+div设置：<divclass="nav_Element_Item"><h2>数据名称:</h2><divclass="data_search_div... 查看详情

jquery实现table模糊搜索(代码片段)

...然被朋友call到说，帮忙用html实现table模糊搜索，前端mock数据自行实现，不用后端交互。其项目用的是jsp，继而不能采用目前前端流行的三大框架的特性，那这相当于“摸底”的小考验了。刚开始，信心满... 查看详情

linux中grep和find的区别

...不同的命令，关于grep：Linux系统中grep命令是一种强大的文本搜索工具，它能使用正则表达式搜索文本，并把匹配的行打印出来。grep全称是GlobalRegularExpressionPrint，表示全局正则表达式版本，它的使用权限是所有用户。而linux下的f... 查看详情

怎样用jquery实现新闻无闪动刷新，用js中工具箱2到3个控件，搜索文本框自动文本框自动填充完成

怎样用jquery实现新闻无闪动刷新，用js中工具箱2到3个控件，搜索文本框自动文本框自动填充完成无刷新其实就是实现数据的异步加载，使得当前页面部分重新装载数据然后你说的类似于百度的自动完成功能要用到第三方控件仅... 查看详情

使用python在html中搜索文本

】使用python在html中搜索文本【英文标题】：Searchingfortextinhtmlusingpython【发布时间】：2018-11-2817:49:19【问题描述】：我有一个电子书阅读器，它不会将突出显示的注释导出到epub文件中，所以我要编写一个Sigil插件来从阅读器中导... 查看详情

jquery实现简单前端搜索功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>工程轻量化与可靠性技术实验室</title></head><body><divclass="content-right"><inputtype="text"&g 查看详情

从 html 内容的可见文本中颤动搜索文本

】从html内容的可见文本中颤动搜索文本【英文标题】：Fluttersearchtextoutofhtmlcontent\'svisibletext【发布时间】：2022-01-1403:24:13【问题描述】：在我的应用程序中，有一个搜索功能可以按用户输入的搜索文本过滤消息列表。但我的消息... 查看详情

突出显示搜索文本引导表

】突出显示搜索文本引导表【英文标题】：Highlightsearchtextbootstraptable【发布时间】：2016-07-3115:07:18【问题描述】：我正在尝试实现jqueryplugin以在我的应用中突出显示搜索文本，我正在使用thistopic，我已将jquery插件添加到我的应用... 查看详情

如何使用在html文档中搜索文本的javascript制作功能搜索框[重复]

】如何使用在html文档中搜索文本的javascript制作功能搜索框[重复]【英文标题】：Howtomakeafunctionalsearchboxusingjavascriptthatsearchestextinhtmldocument[duplicate]【发布时间】：2021-07-2314:10:07【问题描述】：我有一个像这样的html文档，并希望搜... 查看详情

grep命令详解

...theline,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具，它能使用正则表达式搜索文本，并把匹配的行打印出来。grep的工作方式是这样的，它在一个或多个文件中搜索字符串模板。如果模板包括空格，则必须被... 查看详情

使用单个搜索框组合文本框和下拉字段的 JQuery 搜索

】使用单个搜索框组合文本框和下拉字段的JQuery搜索【英文标题】：JQuerysearchforcombiningtextboxanddropdownfieldsusingsinglesearchbox【发布时间】：2016-09-1519:48:59【问题描述】：我有一个用于一个字段的下拉框和一个用于其他字段的文本框... 查看详情

使用 jQuery 在搜索框中输入动画文本

】使用jQuery在搜索框中输入动画文本【英文标题】：AnimatedtextinputinsearchboxwithjQuery【发布时间】：2013-07-1214:37:22【问题描述】：我希望当您单击文本框时它的大小已扩大。这是http://jsfiddle.net/62CDp/的解决方案这个jQuery代码：$(functi... 查看详情

如何使用 javascript 或 jquery 从 JSON 中搜索文本

】如何使用javascript或jquery从JSON中搜索文本【英文标题】：HowtosearchtextfromJSONusingjavascriptorjquery【发布时间】：2014-11-1303:54:50【问题描述】：如何从JSON格式搜索关键字。使用jquery或javascript我有一个JSON内容。从中我需要搜索并获取... 查看详情

在 jquery select2 中更改文本“搜索”

】在jqueryselect2中更改文本“搜索”【英文标题】：Changetext"searching"injqueryselect2【发布时间】：2019-09-1314:06:01【问题描述】：我正在使用带有ajax选项的select2，当ajax运行时，会出现一个文本“正在搜索”，直到ajax成功。我... 查看详情

前端—每天5道面试题(代码片段)

前端—每天5道面试题（十）每天进步1%不多就1%一、用div+css布局的好处？表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。提高搜索引擎对网页的索引效率用只包含... 查看详情

如何从html中的文本框中清除搜索输入？ [复制]

】如何从html中的文本框中清除搜索输入？[复制]【英文标题】：Howtoclearsearchinputfromatextboxinhtml?[duplicate]【发布时间】：2019-06-0502:09:47【问题描述】：我有一个简单的问题。每当我想在搜索框中输入新内容时，如何编写一行代码以... 查看详情

前端页面模拟浏览器搜索功能ctrl+f实现(代码片段)

<html><head><styletype="text/css">.rescolor:Red;.resultbackground:yellow;</style><scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js"type="text/javascript"></s 查看详情

jQuery 插件 DataTables：如何突出显示当前搜索文本？

】jQuery插件DataTables：如何突出显示当前搜索文本？【英文标题】：jQuerypluginDataTables:Howtohighlightthecurrentsearchtext?【发布时间】：2011-02-0808:29:40【问题描述】：我已经开始使用jQuery(v1.4.2)的DataTables插件(v1.6.2)，请问您是否知道设置... 查看详情