Home » Tutorials » JavaScript » Build a Filterable Component With jQuery in Just Only 5 Minutes!

Build a Filterable Component With jQuery in Just Only 5 Minutes!

Build a Filterable Component With jQuery in Just Only 5 Minutes!

If you have a web app that contains a list of information, and you want your users to find the information they are looking for as fast as possible.

In today’s article, I’ll show you how to build your own simple filterable component with jQuery in just only 5 minutes!

Preview:

jQuery Filter List Screenshot

Setting up the HTML

<!DOCTYPE>
<html>
<head>
</head>
<body>
<div class="filtering">
	<h4>Filter by:</h4>
	<div class="tags">
		<div class="checkbox"><label><input type="checkbox" rel="free"/> Free</label></div>
		<div class="checkbox"><label><input type="checkbox" rel="charge"/> With Price</label></div>
		<div class="checkbox"><label><input type="checkbox" rel="family" />Family</label></div>
		<div class="checkbox"><label><input type="checkbox" rel="solo" />Solo</label></div>
	</div>
</div>

<hr />

<h4>Packages:</h4>
<ul class="results">
	<li class="family free">
		<strong>Hokkaido 7D6N Package</strong><br />
		Price: Free<br />
		Type: Suitable for family
	</li>

	<li class="charge family">
		<strong>Tokyo 3D2N Package</strong><br />
		Price: USD 399.00<br />
		Type: Suitable for family
	</li>

	<li class="free solo">
		<strong>New York Summer Tour Package</strong><br />
		Price: Free<br />
		Type: Suitable for solo traveler
	</li>

	<li class="charge solo">
		<strong>Bangkok Water Theme Park Entrance</strong><br />
		Price: USD 59.99<br />
		Type: Suitable for solo traveler
	</li>

	<li class="charge family solo">
		<strong>Beijing Cultural Walk</strong><br />
		Price: USD 399.00<br />
		Type: Suitable for every type of traveler
	</li>
</ul>
</body>
</html>

As you can seen above, our filterable component contains of 2 parts: Filtering checkboxes (div with class=”filtering”) & Results (div with class=”results”).

Filtering checkboxes contains a group of checklist that allows users of web app to choose and filter the information.

The results contains the list of information displayed based on users’ search.

Please take note that, each information contains the class name that related to each filtering checkbox’s rel attribute.

Setting up the jQuery Filter code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/*************
Checkbox Filtering START
*************/
//the resources array will hold all the input[type="checkbox"]:checked values
var resources = [];

//the initial will be used as a string container to target the specific result that needs to be displayed
var initial = "";

$('div.tags').find('input[type="checkbox"]').click(function() {
	// reset array for every time
	resources = [];
  	initial = "";

  	if ($('div.tags input[type="checkbox"]:checked').length > 0) {
  		$('.results li').hide();

  		$('div.tags').find('input:checked').each(function() {
  			if (($.inArray($(this).attr('rel'), resources)) === -1) {
  				resources.push($(this).attr('rel'));
  			}
  			initial = resources.toString();
  			// replace comma to .
      		initial = initial.replace(/,/g, '.');
  		});


		if($(".results > li." + initial).length != 0) {
			$(".results > li." + initial).fadeIn('fast');
		}

  	} else {
  		//reset all when all of the checkboxes are unticked
	    $('.results > li').fadeIn('fast');
  	}

});
/*************
Checkbox Filtering END
*************/
</script>

Now that you’ve had an overview of the required HTML, we can move on to write the JavaScript.

First of all, load jQuery library from Google CDN.

Then, set up 1 empty array and a variable:

And here is the logic for filtering the list of information based on the checked checkbox.

Here’s an explanation of it:

  1. Reset the array & variable we defined when any checkbox is clicked.
  2. Check is any checkbox is checked.
  3. Hide the list of information in the .result div
  4. Loop through each checked checkbox, retrieve checked checkbox rel attribute’s value and store into the array we defined earlier named “resources”.
  5. Convert all the value in “resources” array into a string and replace the comma in the converted value to dot.
  6. Then, apply fadeIn effect to the list of information.
  7. Lastly, we display all information if none of the checkbox is being checked.

Conclusion

You’ve just learned how to build a filterable component with jQuery in just only 5 minutes!

Hope you enjoy this tutorial and please let me know in the comments what you would use this for 🙂


Android, iOS Development Tutorials