前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
做项目的时候有这么一个需求,客户信息显示出来后我要搜索查找相关的客户,并把相关的客户信息全部显示出来,因为一个客户全部信息我写在一个div里面 所以显示的时候就是显示整个div。先看看实现的效果:
成都创新互联公司专注骨干网络服务器租用十年,服务更有保障!服务器租用,西部信息服务器租用 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。
当我输入瓦窑村 就把相关带瓦窑的客户信息显示出来并把瓦窑村字体设置红色, 其他的就不显示;下面看html代码:
后面有n个富民青泉假有限公司530124210342这里就不重复了在我这里用的是onChange事件,这个根据个人的需要可以改;
其实整体的思路是这样的:
1、先把要搜索的内容去html里面找,找到了就全部替换成"+搜索的内容+";changestyle里面的样式红色,加粗
2、再把包含整个内容的div显示出来$(".card").hide().filter(":contains('"+txt+"')").show(); card就是整个包含客户信息的div;
3、大家都知道这样改变了原来div的结构,里面春文本的变成了这样如果第二次输入的时候不把整个div恢复到加载页面的时候搜索就会出bug
明显多了两个b标签 如果不遍历移除b标签我搜瓦窑村在搜村委会就这样
就不会显示红色了;
4、个人学到的关键技术:移除标签,替换全部相关到的文本replace方法,显示需要的div(过滤)filter方法!
总结:其中遇到的问题不止这些还有很多的,上网查了很多资料,纸上得来终觉浅,总是一次一次不同想法不同思路解决不同bug出来的;这很基础,只要有想法有思路就去做,不会的百度,一个点一个点的来。日积月累的慢慢前进吧!
总结
以上所述是小编给大家介绍的前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
本文题目:前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
分享URL:http://scjbc.cn/article/gcedse.html