jQuery liveFilter combiné avec le filtre de catégorie

Hi - Je me demandais s'il serait possible d'utiliser liveFilter en conjonction avec un filtre de catégorie? Le code ci-dessous filtrera en tapant OU par sélection de catégorie. J'aimerais pouvoir faire une recherche par les deux. En d'autres termes, si la catégorie 'action' est sélectionnée, la saisie par liveFilter continuera à restreindre la recherche dans la catégorie 'action'. Des idées? Merci!jQuery liveFilter combiné avec le filtre de catégorie

est ici la page: http://dl.dropbox.com/u/222645/livefilter.html

Voici le 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>

Source

2010-08-03 Josiah

En changeant les FilterValues de livefilter et catgory à un mondial, vous pouvez les combiner dans un filtre comme ceci:

<!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>

Ceci est juste une solution rapide et sale. Peut-être que vous pourriez résumer le filtrage de sorte que le livefilter et le categoryfilter utilisent la même fonction pour faire le filtrage. Ce serait beaucoup "propre" code.

Source

2010-08-03 06:20:42 Falle1234

Génial! Merci pour l'aide! – Josiah

jQuery liveFilter combiné avec le filtre de catégorie

Répondre

Questions connexes