前端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的选中方法(实例讲解)
Jun 27 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现滑动开关效果
Aug 02 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
PHP4.04简明安装
2006/10/09 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP学习记录之数组函数
2018/06/01 PHP
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
详细介绍Python语言中的按位运算符
2013/11/26 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
python如何求100以内的素数
2020/05/27 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
党员思想汇报材料
2014/12/19 职场文书
英语教师个人总结
2015/02/09 职场文书
初二英语教学反思
2016/02/15 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers