List filtering is when we have a list of different items, belonging to different categories and we can choose a category to hide or display. This is very convenient for users if they only want to view items belonging only to a particular category. However, list filtering can become one of the most resource-intensive workloads on a server.

Imagine a database table with the following data:

tbl_fruits

The user can then choose to display all of the data, or filter the results based on their color.
Traditionally, queries like this are handled through the backend. When a user selects a color, it would send a query to our database like this:

SELECT fruit FROM `tbl_fruits` WHERE color = “red”;

In this example, the user selects the color red. This is the most common way of filtering a list. The problem lies however in that the more users requesting the data from our database, the more strain it gives on our server.

However, there is another solution: We can simply cache the most common database results so we don’t strain our database too much. This is what some programs like memcached do.

Even with memory caching, it still doesn’t deal with the fact that clients will have to request with the server multiple times for each request in a category.

With smaller lists however, we can perform client-side list filtering. This is where jQuery comes in. With client-side list filtering, we only have to request the page once, and let the client’s browser do the work for us. In this way, most of the workload is distributed to the client computers.

So how do we make a list filter in jQuery?

Its quite simple really, and it is more of a matter of labeling our element classes correctly. Given our example database from above, we can simply write a back end script to output each item with the element’s class as its category in our database.

Given our database example, for this demo, this is how we would show our form:

Select Color Category:
<select name="catSelect" id="catSelect">
	<option value="all">Show All</option>
	<option value="red">Red</option>
	<option value="blue">Blue</option>
	<option value="yellow">Yellow</option>
</select>
<input type="button" id="btnFilter" value="Filter the list">
<ul>
	<li class="item red">Apple</li>
	<li class="item blue">Grape</li>
	<li class="item yellow">Lemon</li>
	<li class="item red">Cherry</li>
	<li class="item yellow">Banana</li>
	<li class="item red">Strawberry</li>
	<li class="item blue">Blueberry</li>
	<li class="item red">Raspberry</li>
	<li class="item yellow">Pineapple</li>
</ul>

In this set-up notice that:

#catSelect – This is the id of the select box, we need this to get its value
#btnFilter – This is the id of the button that will trigger the filter event
.item – This is the class of all the items from the list. This is important so we can show all.
.red, .blue, .yellow – Depending on the fruit’s category, we will apply the appropriate class.

With all of these considerations in mind, this is how our final jQuery script will look like:

$(document).ready(function()
{
	$("#btnFilter").click(function()
	{
		var selection = $("#catSelect").val();

		if (selection == "all")
		{
			//show all items
			$(".item").show();
		}
		else
		{
			$(".item").hide();
			$("."+selection).show();
		}
	});
});

What happens in this code is that whenever the #btnFilter button is clicked, it triggers an event where we get the value of the category from select box #catSelect.

If the “all” value is selected, we would show all of the list. However, if only a specific category is specified, we will hide all of the other categories and only show the items with the proper class.

A working demo of this article can be found below:
jQuery: List Filter Demo

The source code for the demo can be downloaded here:
jQuery: List Filter Demo Source Code

The continuation of this article can be found below:
Filtering Lists With Multiple Categories Using jQuery

Bookmark to: