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


Posted in jQuery onNovember 14, 2017

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

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

当我输入瓦窑村  就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色, 其他的就不显示;下面看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

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

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

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

就不会显示红色了;

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

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

总结

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

jQuery 相关文章推荐
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jquery replace方法去空格
May 08 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 #jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 #jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
You might like
最省空间的计数器
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python 变量初始化空列表的例子
2019/11/28 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
主婚人致辞精选
2015/07/28 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
运动会广播稿20字
2015/08/19 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
git stash(储藏)的用法总结
2022/06/25 Servers