当前位置:主页 > 网站优化 >

用HTML5+jquery实现的搜索匹配效果

作者: 采集侠 分类: 网站优化 发布时间: 2019-08-16 03:57 阅读量:

HTML5+jquery实现的搜索匹配效果,或者说是搜索过滤,当你在文本框输入一个字符时,如果下边的列表中有以此为开头的内容时,将自动为你显示相关内容,示例中仅列出了一些,用时候你可以自己再完善下,代码仅为您提供一种思路,我想对你是有帮助的。

<!DOCTYPE html>
<head>
<title>jQuery实现的搜索列表过滤</title>
<style>
body{background: #fff font-size: 13px;}
#wrap{position: relative;}
.product-head h1{font-size: 14px;font-family: Arial, Helvetica, sans-serif;margin-bottom: 3px;margin-left: 3px;}
.product-head{font-size: 12px;padding: 4px;background-color: #ccc;width: 235px;}
.filterform input{font-size: 15px;padding: 3px;border: 1px solid #999;}
li{padding: 5px;margin: 3px;list-style: none;width: 230px;border-top: 1px solid #ccc;}
li a{color: #000;font-family: Arial, Helvetica, sans-serif;font-size: 11px}
ul{margin: 0;padding: 0;}
.clear{clear: both;}
</style>
<script src=””></script>
<script>
(function ($) {
jQuery.expr[‘:’].Contains = function(a,i,m){
return (a.textContent || a.innerText || “”).toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function filterList(header, list) {
var form = $(“<form>”).attr({“class”:”filterform”,”action”:”#”}),
input = $(“<input>”).attr({“class”:”filterinput”,”type”:”text”});
$(form).append(input).appendTo(header);
$(input)
.change( function () {
var filter = $(this).val();
if(filter) {
$matches = $(list).find(‘a:Contains(‘ + filter + ‘)’).parent();
$(‘li’, list).not($matches).slideUp();
$matches.slideDown();
} else {
$(list).find(“li”).slideDown();
}
return false;
})
.keyup( function () {
$(this).change();
});
}
$(function () {
filterList($(“#form”), $(“#list”));
});
}(jQuery));
</script>
</head>
<body>
<noscript><div id=”noscript”>需要开启浏览器的JavaScript功能才能查看更多效果!</div></noscript>
<div id=”container”>
<div id=”wrap”>
<div class=”product-head”>
<h1>Product Search</h1>
<div id=”form”></div>
<div class=”clear”></div>
</div>
<ul id=”list”>
<li><img src=”” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Apple/”>Apple</a></li>
<li><img src=”” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Broccoli/”>Broccoli</a></li>
<li><img src=”” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Carrot/”>Carrot</a></li>
<li><img src=”” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Celery/”>Celery</a></li>
<li><img src=”” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Lettuce/”>Lettuce</a></li>
<li><img src=”” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Mushroom/”>Mushroom</a></li>
<li><img src=”” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Onion/”>Onion</a></li>
</ul>
</div>
</body>
</html>


本文链接地址:http://www.seohuizhou.com/webyouhua/1427.html
上一篇:<<WordPress模板制作流程
下一篇:前端工程师必备的几个实用网站>>