live sample
filtering plugin
Here I list my filtering plugin for JQuery.
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", /* row selector */
{ minLength: 3, focus: true }); /* options */
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.