本文主要介绍了前端html中jquery实现对文本的搜索功能并把搜索相关内容显示出来,在项目中经常会遇到，今天小编把实例代码分享给大家，需要的朋友可以参考下，希望能帮助到大家。
做项目的时候有这么一个需求，客户信息显示出来后我要搜索查找相关的客户，并把相关的客户信息全部显示出来，因为一个客户全部信息我写在一个p里面 所以显示的时候就是显示整个p。先看看实现的效果：
当我输入瓦窑村 就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色， 其他的就不显示；下面看html代码：
富民青泉假有限公司
530124210342
客户经理:卢燕洲
后面有n个
负责人:张仕城 12345698711
地址:富民县东村镇乐在村委会乐在村张仕城
客户分档:二档这里就不重复了
登录后复制
在我这里用的是onChange事件，这个根据个人的需要可以改；
立即学习“前端免费学习笔记（深入）”；
.changestyle{color:red;font-weight:600;} function txtSearch() { //遍历移除b标签，防止第二次搜索bug $(".changestyle").each(function() { var xx=$(this).html(); $(this).replaceWith(xx); }); //整个客户信息p var str=$("#pMain").html(); //文本输入框 var txt=$("#txtSearch").val(); //不为空 if($.trim(txt)!="") { //定义b标签样式红色加粗 var re=""+txt+""; //替换搜索相关的所有内容 var nn=str.replace( new RegExp(txt,"gm"),re); //赋值 // document.getElementById("pMain").innerHTML=nn; $("#pMain").html(nn); //显示搜索内容相关的p $(".card").hide().filter(":contains('"+txt+"')").show(); } else { $(".card").show(); } }
登录后复制
其实整体的思路是这样的：
1、先把要搜索的内容去html里面找，找到了就全部替换成“+搜索的内容+”；changestyle里面的样式红色，加粗
2、再把包含整个内容的p显示出来$(“.card”).hide().filter(“:contains(‘”+txt+”‘)”).show(); card就是整个包含客户信息的p；
3、大家都知道这样改变了原来p的结构，里面春文本的变成了这样如果第二次输入的时候不把整个p恢复到加载页面的时候搜索就会出bug
明显多了两个b标签 如果不遍历移除b标签我搜瓦窑村在搜村委会就这样
就不会显示红色了；
4、个人学到的关键技术：移除标签，替换全部相关到的文本replace方法，显示需要的p（过滤）filter方法！
总结：其中遇到的问题不止这些还有很多的，上网查了很多资料，纸上得来终觉浅，总是一次一次不同想法不同思路解决不同bug出来的；这很基础，只要有想法有思路就去做，不会的百度，一个点一个点的来。日积月累的慢慢前进吧！
相关推荐：
JS带导航城市列表以及输入搜索功能的实现
jQuery实现键盘回车搜索功能详解
JavaScript实现前端实时搜索功能的代码分享（图）
以上就是html中jQuery实现对文本的搜索功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2790584.html
