jQuery实现搜索自动提示(搜索筛选)

2014-07-22阅读(5648)评论(0)牵着狗狗看MM

苏州实时公交查询

通过jquery做内容关键字搜索筛选功能,适用于列表内容较多不易查找的页面,也可用于搜索框提示。
jquery-auto-search

HTML代码

[html]<div id="demo-wrap">
<div class="product-head">
<p>搜索列表内容:</p>
<div id="form"></div>
</div>
<ul id="demo-list">
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Apple</a></li>
<li><a href="#">AAAAAAA</a></li>
<li><a href="#">BBBBBBB</a></li>
<li><a href="#">BCCCCCCC</a></li>
<li><a href="#">CCCCCCC</a></li>
<li><a href="#">CDDDDD</a></li>
<li><a href="#">CAAAAA</a></li>
<li><a href="#">EEDDDDDD</a></li>
<li><a href="#">Feeee</a></li>
<li><a href="#">ACCCCCCC</a></li>
<li><a href="#">FEEEEEEEE</a></li>
<li><a href="#">jJack</a></li>
</ul>
</div>
[/html]

jQuery代码

[js](function($) {
$.expr[":"].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function filterList(header, list) {
//@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"), $("#demo-list"));
});
})(jQuery);
[/js]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jQuery实现搜索自动提示(搜索筛选)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏