jquery列表的过滤示例

最新推荐文章于 2022-05-01 19:16:09 发布

jbgtwang

最新推荐文章于 2022-05-01 19:16:09 发布

阅读量1.1k

点赞数

jquery列表的过滤示例

代码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple jQuery filter – unordered list</title> 
<style> 
	body {
		background:#fff;
		color:#000;
		font:75%/1.5em Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
	}
	#wrap {
		width: 500px;
		position: relative;
		left: 50%;
		margin-left: -250px;
	}
	#header {
		position:relative;
		line-height:1em;
	}
	input {
		border:1px solid #ccc;
		border-bottom-color:#eee;
		border-right-color:#eee;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		font-size:1em;
		height:2.25em;
		*height:1.5em;
		line-height:1.5em;
		padding:0.29em 0;
		width:100%;
		margin:0 0 0.75em;
	}
	.filterform {
		width:220px;
		font-size:12px;
		display:block;
	}
	.filterform input {
		-moz-border-radius:5px;
		border-radius:5px;
		-webkit-border-radius:5px;
	}
	code {
		font:"Courier New", Courier, monospace;
		font-size:12px;
	}

</style> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script> 
 
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };
  
  function listFilter(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);//添加form input到$("#header")
 
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }
 
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));
 
  </script> 
 
</head> 
<body> 
<div id="wrap"> 
    <h1 id="header">DVD Collection</h1> 
    <ul id="list"> 
        <li><a href="#">Batman</a></li> 
        <li><a href="#">Ice Age</a></li> 
        <li><a href="#">Star Trek (2009)</a></li> 
        <li><a href="#">Tremors</a></li> 
    </ul> 
</div> 
</body> 
</html>