jQuery列表内容搜索筛选代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery列表内容搜索筛选代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>jQuery列表内容搜索筛选代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.9.1.min.js"></script>
<style>
#demo-wrap{position:relative;margin:0 auto;width:260px;overflow:hidden;border:1px solid #DDD;}
#demo-wrap .product-head p{font-size:14px;font-family:Arial,Helvetica,sans-serif;margin:5px 3px 5px;padding:0 0 5px;}
#demo-wrap .product-head{font-size:12px;padding:8px 4px;background-color:#F1F1F1;}
#demo-wrap .filterform{border:1px solid #999;border-radius:15px;padding:4px 12px;background-color:#fff;}
#demo-wrap .filterform input{font-size:12px;padding:0;border:0;outline:none;}
ul#demo-list li{padding:8px;list-style:none;border-top:1px solid #ccc;border-bottom:1px solid #fff;}
ul#demo-list li a{color:#000;font-family:Arial,Helvetica,sans-serif;font-size:11px;text-decoration:none;}
ul#demo-list{margin:0;padding:0;}.clear{clear:both;}
</style>

</head>
<body>
<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>

<script type="text/javascript">
(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);	
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)