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.
seems to be interesting, but with no working live demo you wont get many people using it…
Hello Michael,
Thanks by the comment (is my first ever comment by a foreign person – I’m from Portugal).
Underestimating the power of the Web (shame on me
) did not put a working live demo available. I treat it now, waiting your comment 
.
In fact, i needed this functionality in an application I’m developing. I search for one, and not founding anything, I made my own implementation and published it as a JQuery plugin (my first one).
PS: All this happened, in part, because in WordPress you cannot use scripts in posts.
EDIT: Live sample is available here.