jQuery实现的简单前端搜索功能示例
本文实例讲述了jQuery实现的简单前端搜索功能。分享给大家供大家参考,具体如下:
html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程轻量化与可靠性技术实验室</title> </head> <body> <div class="content-right"> <input type="text"><input type="submit" value="搜索"> <h3>应用流体学</h3> <ul id="content_news_list"> <li><span>2015-7-8</span><a href="">这里是文章的标题1</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题2</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题3</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题5</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li> <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li> </ul> </div> </body>
jQuery代码:
<script type="text/javascript"> $(function(){ $("input[type=text]").change(function () { var searchText = $(this).val();//获取输入的搜索内容 var $searchLi = "";//预备对象,用于存储匹配出的li if (searchText != "") { //获取所有匹配的li $searchLi = $("#content_news_list").find('a:contains('+ searchText +')').parent(); //将内容清空 $("#content_news_list").html(""); } //将获取的元素追加到列表中 $("#content_news_list").html($searchLi).clone(); //判断搜索内容是否有效,若无效,输出not find if ($searchLi.length <= 0) { $("#content_news_list").html("<li>not find</li>") } }) $("input[type=submit]").click(function () { $("searchText").change(); }) }) </script>
通过关键字检索列表中的元素,并将其添加到ul中。
其中$(':contains(text)')
获取包含指定字符的元素,该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。
此方法中就是通过判断所获取的元素知否包含所搜索的字符,来实现简单的检索功能。
但是却存在兼容问题,无法兼容IE,在获取元素parent()
时无法将内容写入列表中。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery 过滤方法filter()选择具有特殊属性的元素
需要选出所有有背景图片的元素,使用jQuery的DOM过滤方法filter(),可以根据函数中表达的任何条件选择元素,需要的朋友可以参考下2014-06-06JQuery 插件模板 制作jquery插件的朋友可以参考下
JQuery 插件模板 制作jquery插件的朋友可以参考下2010-03-03jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
这篇文章主要介绍了jQuery Dialog 打开时自动聚焦的解决方法,及jquery dialog打开时,自动聚焦在第一个控件上的方法,对jquery dialog相关知识感兴趣的朋友通过本文一起学习吧2016-11-11探讨JQUERY JSON的反序列化类 using问题的解决方法
本篇文章是对JQUERY JSON的反序列化类 using问题的解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
在这节,我们将看到如何把多行文本框的内容复制到剪贴板上。注意:jQuery clipboard plugin 只支持IE2012-01-01
最新评论