A few days back I was asked to build a scrolling div full of checkboxes populated via a database query record set that could be filtered. To accomplish this, I’ve often used AJAX in the past to hit a CF component that would run a SELECT statement containing a WHERE clause that looked for a record LIKE my existing value. This would return back the filtered item.
In this case however, I was working with a very large dataset and it was not appropriate to make an AJAX call to filter the dataset, and much less to do so on each key press to simulate live filtering. So I decided to filter on the client side and leave CF and AJAX out of the equation all-together. Naturally, I open the jQuery docs and start looking for something along the lines of a regular expression. As usual jQuery makes things even simpler than I could have imagined.
The jQuery selectors page shows multiple ways of selecting elements. One way is to use the ‘contains’ selector that essentially looks at the value of an attribute and checks if the substring exists in any of the available values. Once we know which elements are like and not like the substring (a.k.a. the filter criteria) we can use the jQuery show() and hide() functions to perform the filter visually for the user.
Let’s look at an example.
At Monserrate Monastery in Bogotá, Colombia.