本文实例讲述了jQuery实现的简单前端搜索功能。分享给大家供大家参考,具体如下:
html代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>工程轻量化与可靠性技术实验室& lt;/title>
& lt;/head>
& lt; body>
祝辞& lt; div class="内容正确”;
& lt;输入类型=拔谋尽弊４? lt;输入类型=疤峤弧奔壑?" https://www.yisu.com/zixun/搜索”在
& lt; h4>应用流体学& lt;/h4>
& lt; ul id=癱ontent_news_list”比;
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题1 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题2 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题3 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题4 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题5 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题6 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题6 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题6 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题6 & lt;/a> & lt;/li>
& lt; li> & lt; span> 2015 - 7 - 8 & lt;/span> & lt; a href="在这里是文章的标题4 & lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/body>
之前
jQuery代码:
& lt;脚本type=" text/javascript祝辞
$(函数(){
$(“输入(type=文本)”)。改变(函数(){
var searchText=$(这).val();//获取输入的搜索内容
var searchLi=" ";美元//预备对象,用于存储匹配出的
如果(searchText !=" ") {//获取所有匹配的
美元searchLi=$ (" # content_news_list ")。找到(':包含(' + searchText + ') ') .parent ();//将内容清空
$ (" # content_news_list ") . html (" ");
}//将获取的元素追加到列表中
$ (" # content_news_list ") . html (searchLi美元).clone ();//判断搜索内容是否有效,若无效,输出找不到
如果(searchLi美元。长度& lt;=0) {
$ (" # content_news_list ") . html (“& lt; li>不是find”)
}
}）
$(“输入(type=提交)”)。点击(函数(){
$ (searchText) .change ();
}）
}）
& lt;/script>
之前
通过关键字检索列表中的元素,并将其添加到ul中。
其中<代码> $(':包含(文本)')获取包含指定字符的元素,该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。
此方法中就是通过判断所获取的元素知否包含所搜索的字符,来实现简单的检索功能。
但是却存在兼容问题,无法兼容即在获取元素父()<代码> 时无法将内容写入列表中。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(表)操作技巧汇总》、《jQuery切换特效与技巧总结》,《jQuery扩展技巧总结》,《jQuery常用插件及用法总结》,《jQuery拖拽特效与技巧总结》,《jQuery Ajax用中法总结》,《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
