做项目的时候有这么一个需求，客户信息显示出来后我要搜索查找相关的客户，并把相关的客户信息全部显示出来，因为一个客户全部信息我写在一个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出来的；这很基础，只要有想法有思路就去做，不会的百度，一个点一个点的来。日积月累的慢慢前进吧！

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

  1. Tag It 一款 Jquery控件，当你在文本框中输入逗号时，自动帮你分隔开相关内容

    Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.c ...

  2. 网站建设中前端常用的jQuery+easing缓动的动画

    网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

  3. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  4. jQuery中操作页面的文本和值

    主要是区分俩种方法: 1.html():可以识别HTML文件,将里面内容全部打印(操作双标签) 2.text():只是将里面的内容打印出来,不能识别HTML格式(操作双标签) <!DOCTYPE ...

  5. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  8. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  9. 前端(5)之jQuery

    前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...

随机推荐

  1. pgpool-II主备流复制的架设

    1.环境 OS: CentOS release 6.4 (Final) DB: postgresql 9.3.6 pgpool服务器: pgpool 172.16.0.240 数据库主服务器:mast ...

  2. C#实现断点续传

    断点续传的原理在了解HTTP断点续传的原理之前,先来说说HTTP协议,HTTP协议是一种基于tcp的简单协议,分为请求和回复两种.请求协议是由客户机(浏览器)向服务器(WEB SERVER)提交请求时 ...

  3. 定制自己的vue模版

    前言 使用vue这个框架已经陆陆续续做了好几个项目了,不知不觉也已经在公司呆了4个月,转正了.时间如水...(省略一万字)./咳-不瞎扯了,公司是直接用的官方脚手架生成项目,官方模版没有vuex,ax ...

  4. yii2-swiftmailer入门

    1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...

  5. js中 && 与 || 的妙用

    在js逻辑运算中,0."".null.false.undefined.NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下).这个一定要记住,不然应用||和& ...

  6. javascript中call()、apply()、bind()的用法终于理解

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  7. wampserver里面出现403错误的问题解决方法

    今天再装wampserver的时候,不能进入localhost和phpmyadmin,提示403错误,我自己是win10系统,已通过以下方法解决了: 1.第一个问题,就是wampserver没有切换到 ...

  8. ActiveMQ——activemq的详细说明，queue、topic的区别（精选）

    JMS中定义了两种消息模型:点对点(point to point, queue)和发布/订阅(publish/subscribe,topic).主要区别就是是否能重复消费. 点对点:Queue,不可重 ...

  9. Android Annotations(1)

    特性:   Android Annotations是一个开源的框架,用于加速 Android应用的开发,可以让你把重点放在功能的实现上,简化了代码,提升了可维护性. 特性: 依赖注入: inject ...

  10. PhiloGL学习（1）——场景创建及方块欲露还羞出水面

    前言 上一篇文章中介绍了我认识PhiloGL框架的机缘以及初步的探讨(见JS前端三维地球渲染--中国各城市航空路线展示),在此文中仅仅对此框架进行了简单介绍并初步介绍了一些该框架的知识.首先三维这个东 ...