jquery列表的过滤示例

浅浅的花香味﹌ 2022-08-27 14:56 165阅读 0赞

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>

转自: http://blog.grapii.com/2010/08/how-to-build-a-simple-search-filter-with-jquery/

示例连接:

http://resource.grapii.com/files/jQueryFilter/ulExample.html

http://resource.grapii.com/files/jQueryFilter/divExample.html