Skip Navigation Links.


Skip Navigation Links
download here. works with jQuery version: 1.2.6

filtering plugin - live sample

Imagine that you have a page with the list of all people in an application (possibly lots of rows) and you want to provide an easy way to filter the content based on the value given by an input field, with this base markup.



... and with the next rendering. The filter input is already "powered up" to filter the rows (see the code bellow).



  Filter:  
  
 
       
        
Number Name Gender
      

       
         
  1111  Homer Simpson   male 
 
         
  2222  Marge Simpson   female 
 
         
  3311  Lisa Simpson    female 
 
         
  3322  Bart Simpson    male 
 
         
  3333  Maggie Simpson  female 
 
         
  4444  Fred Flinston   male 
 
         
  5555  Willma Flinston female 
 
       
  




    

        With the filtering plugin you could write the following code to
        set that the content of the filter input field will filtering the content
        of peopleList table rows.



    <script src="jquery.filtering-0.1.js" type="text/javascript"></script>
    <script type="text/javascript" >
    $("#filter").filtering("#peopleList tbody tr",      /* row selector */
                           {minLength: 2 });            /* options     */
    </script>






    

        In this version the plugin has 3 optional parameters, namely:

    
    
        
  • focus to define that the selected element (usually an
            input field) should have focus; 
    • 
        
  • minLength that defines the minimum number of characters in the
            selected element that triggers the filtering; 
    • 
        
  • caseSensitive to set if the filtering is case sensitive. 
    • 
    

    

        This parameters could also be defined as default values with the common syntax of
        JQuery plugins.

    
$.fn.filtering.defaults.caseSensitive = true;