My first JQuery plugin (filtering)

Today I develop my first JQuery plugin (named filtering). It’s goal is to filter content in a page based on the value of an input. Consider the next scenario:

Imagine that you have a page with the list of all students 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.

<input type="text" id="Search" />

<table id="StudentsList" >

  <tbody>

    <tr> first line </tr>

    <tr> second line </tr>

    <tr> last line </tr>

  </tbody>

</table>

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

$("#Search").filtering("#StudentsList tbody tr",

                       { minLength: 3, focus: true });

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;

download plugin here.