Filtering data with jQuery

We are working with data every day and there is a part of our applications, which is responsible for presenting the information to the user. Sometimes we need to show a lot of records and then we are using pagination or additional server requests to filter the data. A little JavaScript code could change the things a lot - fast data filtering and better user experience.

The example which I used is located here (download the source code). The script generates fifty random words and shows them in a simple HTML table. The idea is to use the input field at the top to access a specific record. When the user starts typing, the words are automatically filtered. In this case I used jQuery, but generally you can easily use some other library.

It is good to put all the filtering login in one namespace/module. I really like the module pattern. That's why I used it here.

I also used a function by James Padolsey which generates the random words:

Adding the words in a HTML table:

As it is good to present the data immediately after a change in the filter input, I attached a keyup event handler to the field. Once I got the value of the input I used regular expression to decide which rows to hide or show.

The whole example's code looks like that:

The result of it is avaible here http://krasimirtsonev.com/files/filteringdata/filtering.html.

Source code.