jQuery liveFilter与类别过滤器相结合

问题描述：

嗨 - 我想知道是否有可能将liveFilter与类别过滤器结合使用？下面的代码将通过键入或按类别选择进行过滤。我希望能够通过BOTH进行搜索。换句话说，如果选择了“操作”类别，则liveFilter类型将继续缩小“操作”类别内的搜索范围。有任何想法吗？谢谢！jQuery liveFilter与类别过滤器相结合

这里的页面：http://dl.dropbox.com/u/222645/livefilter.html

这里的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>LiveFilter 1.1</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <script>//liveFilter 1.1 plugin 
     (function($){ 
      $.fn.liveFilter = function (wrapper) { 
       var wrap = '#' + $(this).attr('id'); 
       var item = 'li'; 
       $('input.filter').keyup(function() { 
        var filter = $(this).val(); 

        // Hide all the items and then show only the ones matching the filter 
        $(wrap + ' ' + wrapper + ' ' + item).hide(); 
        $(wrap + ' ' + wrapper + ' ' + item + ':Contains("' + filter + '")').show(); 
       }); 

       // Custom expression for case insensitive contains() 
       jQuery.expr[':'].Contains = function(a,i,m){ 
        return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; 
       }; 
      } 
     })(jQuery); 
    </script> 
    <script type="text/javascript"> // Activate liveFilter plugin 
    $(document).ready(function() { 
     $('#list_wrapper').liveFilter('ul'); 
    }); 
    </script> 

    <script> // Filter Results by Category (not part of liveFilter) 
    $(document).ready(function(){ 
     $('#filter-buttons a').click(function(e){ 
     e.preventDefault(); 
     var filter = $(this).attr('id'); 
     $('#list_wrapper ul li').show(); 
     $('#list_wrapper ul li:not(.' + filter + ')').hide(); 
     }); 
    }); 
    </script> 

</head> 
<body> 
<div id="page_wrapper"> 
    <div id="list_wrapper"> 
     <input class="filter" name="livefilter" type="text" value="" /> 

     <div id="filter-buttons"><!--Filter by Category (not part of liveFilter)--> 
      <a href='#'>All</a> 
      <a href='#' id='action'>Action</a> 
      <a href='#' id='drama'>Drama</a> 
      <a href='#' id='comedy'>Comedy</a> 
     </div> 

     <ul class="live_filter"> 
      <li class="drama"><a href="#">The Shawshank Redemption (1994)</a></li> 
      <li class="action"><a href="#">The Godfather (1972)</a></li> 
      <li class="action"><a href="#">Pulp Fiction (1994)</a></li> 
      <li class="action"><a href="#">The Dark Knight (2008)</a></li> 
      <li class="drama"><a href="#">Schindler's List (1993)</a></li> 
      <li class="comedy"><a href="#">One Flew Over the Cuckoo's Nest (1975)</a></li> 
      <li class="comedy"><a href="#">Dumb and Dumber (1995)</a></li> 
      <li class="action"><a href="#">The Empire Strikes Back (1980)</a></li> 
      <li class="drama"><a href="#">Casablanca (1942)</a></li> 
      <li class="action"><a href="#">Star Wars (1977)</a></li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

答

通过改变从livefilter和catgory全球一个filtervalues您可以将它们合并成一个过滤器是这样的：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <title>LiveFilter 1.1</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
     <script>//liveFilter 1.1 plugin 
      var catgory = 'All'; 
      var filter = ''; 
      (function($){ 
       $.fn.liveFilter = function (wrapper) { 
        var wrap = '#' + $(this).attr('id'); 
        var item = 'li'; 
        $('input.filter').keyup(function() { 
         filter = $(this).val(); 

         // Hide all the items and then show only the ones matching the filter 
         $(wrap + ' ' + wrapper + ' ' + item).hide(); 
         $(wrap + ' ' + wrapper + ' ' + item + ':Contains("' + filter + '")').show(); 
         $(wrap + ' ' + wrapper + ' ' + item + ':linot(.' + category + ')').hide(); 
        }); 

        // Custom expression for case insensitive contains() 
        jQuery.expr[':'].Contains = function(a,i,m){ 
         return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; 
        }; 
       } 
      })(jQuery); 
     </script> 
     <script type="text/javascript"> // Activate liveFilter plugin 
     $(document).ready(function() { 
      $('#list_wrapper').liveFilter('ul'); 
     }); 
     </script> 

     <script> // Filter Results by Category (not part of liveFilter) 
     $(document).ready(function(){ 
      $('#filter-buttons a').click(function(e){ 
      e.preventDefault(); 
      category = $(this).attr('id'); 
      $('#list_wrapper ul li').hide(); 
      $('#list_wrapper ul li:Contains("' + filter + '")').show(); 
      $('#list_wrapper ul li:not(.' + category + ')').hide(); 
      }); 
     }); 
     </script> 

    </head> 
<body> 
    <div id="page_wrapper"> 
     <div id="list_wrapper"> 
      <input class="filter" name="livefilter" type="text" value="" /> 

      <div id="filter-buttons"><!--Filter by Category (not part of liveFilter)--> 
       <a href='#'>All</a> 
       <a href='#' id='action'>Action</a> 
       <a href='#' id='drama'>Drama</a> 
       <a href='#' id='comedy'>Comedy</a> 
      </div> 

      <ul class="live_filter"> 
       <li class="drama"><a href="#">The Shawshank Redemption (1994)</a></li> 
       <li class="action"><a href="#">The Godfather (1972)</a></li> 
       <li class="action"><a href="#">Pulp Fiction (1994)</a></li> 
       <li class="action"><a href="#">The Dark Knight (2008)</a></li> 
       <li class="drama"><a href="#">Schindler's List (1993)</a></li> 
       <li class="comedy"><a href="#">One Flew Over the Cuckoo's Nest (1975)</a></li> 
       <li class="comedy"><a href="#">Dumb and Dumber (1995)</a></li> 
       <li class="action"><a href="#">The Empire Strikes Back (1980)</a></li> 
       <li class="drama"><a href="#">Casablanca (1942)</a></li> 
       <li class="action"><a href="#">Star Wars (1977)</a></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

这只是一个快速和肮脏的解决方案。也许你可以抽象过滤，以使livefilter和categoryfilter使用相同的功能来进行过滤。这将是一个很“清洁”的代码。

太棒了！谢谢您的帮助！ – Josiah 2010-08-07 04:07:03

jQuery liveFilter与类别过滤器相结合

相关推荐