This article is a continuation to the Filtering Lists Using jQuery. In the previous article, we’ve discussed how to filter a simple list using a single category. However, in real life this isn’t simply the case. What if we have a new column for our database table which adds a new category to our fruits list:

tbl_fruits

The front-end would be a products list with all of the products in place and customers can filter which color and type of fruits they need to find.

Traditional wisdom would tell us that we would need to make a script that would send a query to the backend for every post request the reload the page for the search results.

SELECT fruit FROM `tbl_fruits` WHERE color = “Red” AND type = “Berry”;

However there are some instances that this approach has too much overhead on our backend and our database. In cases where all data has already been preloaded, we don’t have to query the database once again for data that is already available. We can simply use jQuery to control this information.

First of all, we need to make our form. Lets make 2 select boxes for our category selection:

Select Color Category:
<select name="selFruitColor" id="fruitColor">
	<option value="all">Any Color</option>
	<option value="red">Red</option>
	<option value="blue">Blue</option>
	<option value="yellow">Yellow</option>
</select>
<br>
Select Fruit Type:
<select name="selFruitType" id="fruitType">
	<option value="all">Any Type</option>
	<option value="fruit">Fruit</option>
	<option value="berry">Berry</option>
</select>
<br>
<input type="button" id="btnFilter" value="Filter the list">

Thing to note:
#fruitColor – The id of the select box for choosing fruit color
#fruitType – The id of the select box for choosing fruit type
#btnFilter – The id of the button that triggers the filtering of our list

Labelling the id of our elements is quite important so we can refer to them later in our script for triggering events and extracting values.

Now for displaying our data, in this case, we need to label each item properly to match with their respective categories. We can do this either manually for static pages or dynamically using your script of choice:

<ul>
	<li class="item red fruit">Apple</li>
	<li class="item blue fruit">Grape</li>
	<li class="item yellow fruit">Lemon</li>
	<li class="item red fruit">Cherry</li>
	<li class="item yellow fruit">Banana</li>
	<li class="item red berry">Strawberry</li>
	<li class="item blue berry">Blueberry</li>
	<li class="item red berry">Raspberry</li>
	<li class="item yellow fruit">Pineapple</li>
	<li class="item yellow berry">Yellowberry</li>
</ul>

Thing to note:
.item – This is the class of all the items from the list. This is important so we can show all, or ignore one of the categories when this is selected.
.red.berry, .blue.fruit, .yellow.fruit – Depending on the fruit’s category, we will apply the appropriate class. For example, an item under blue and berry will have class=”item blue berry”

And finally to piece it all together, we would need the jQuery script to filter our list based on our trigger:

$(document).ready(function()
{
	$("#btnFilter").click(function()
	{
		var fruitColor	= $("#fruitColor").val();
		var fruitType	= $("#fruitType").val();
		var fruitColorSelector = '';
		var fruitTypeSelector = '';		

		if (fruitColor == "all" && fruitType == "all")
		{
			//show all items
			$(".item").show();
		}
		else
		{
			if (fruitType != "all")
			{
				fruitTypeSelector = '.' + fruitType
			}

			if (fruitColor != "all")
			{
				fruitColorSelector = '.' + fruitColor
			}

			$(".item").hide();
			$(fruitTypeSelector + fruitColorSelector).show();
		}

	});

});

So what does this script basically do?

When #btnFilter has been clicked, it takes the value of #fruitType and #fruitColor. If it detects that both categories are set to “any”, it will display everything on the list.

If the categories for fruitType and fruitColor and both set, it will only display items in the list that fits the class criteria of both.

Now if it detects that just one of the categories is set to “any”, it sets the selector for the category to an empty string to the category will be omitted. Only one of the categories will then take effect.

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

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

Bookmark to: