Menu

Quick and easy content filtering using jQuery

Tutorials

Quick and easy content filtering using jQuery

Quick and easy content filtering using jQuery

Many times when I had to implement a live search and filtering system into an website I found myself doing the same thing again and again, especially when it comes to the filtering system.

There are plenty of plugins which will do these things, some of them are free and also widely supported, I’m not trying to show you just another filtering system.

In this tutorial I will show you a simple, basic way to create a filtering system using a live search plugin with just few lines of code.

So, if you’re looking for a full list of features, functionalities, animations, event handlers, there are plugins which can do that, this article is not about that.

Let’s begin!

Adding the live search plugin

For this tutorial we will use HideSeek which is a simple, yet customizable jQuery plugin for live search, is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0. and supports highlighting, custom message, navigation, initialization via data attribute and custom events.

Configuring it is pretty simple, here’s the default usage :

Basically you have to declare the id, class or whatever for your input element, in my case the search input.

This is how the search input looks:

You see here  data-list=".sorting_list"  this is where we choose what content to search.

Our list consists of some images and some text.

Here’s a screenshot of how our list will look like:

screenshot-easy-filtering-system

The markup is pretty simple nothing complicated:

 

How this works till now I think is pretty easy to understand. If you write “cow” inside the search input you will see just the cow image and the text associated with it.

Creating a filtering system based on the search input

As you probably noticed, in the screenshot above we have few links like “Mighty Bird”, “Nerdy Cat”, “Wonder Cow”.

Next we’re going to make the anchor elements behave like filters. For example when we click on “Mighty Bird” the search input will be filled with the text “Mighty Bird”.

We have “View all” which I don’t have to explain what it does.

The magic

Here’s the code responsible for creating this awesome filtering system:

First we make sure that if  the link with a class name of  “clear” is clicked we clear the search input.

Next we check if a link with a class name of “filter” is clicked we add to the search input the anchor element text.

Pretty simple, no?

We now have a fully functional filtering system with just few lines of code. You don’t have to add heavy weight plugins with tons of features if you just want something simple like this.

That’s it! We have just built a quick and easy content filtering using a live search jQuery plugin.

DEMO DOWNLOAD

Tags: , , , ,
2 Comments Leave a reply

  1. Atle

    Just wanted to thank you for sharing this plugin, within 3 minutes I had it working like a charm. I’ve tried several other live-search solutions, but they’re often bloated and too extensive. So thanks again for your generosity!

    Reply

Leave a comment

Your comment(click button to send)

Share

This is a unique website which will require a more modern browser to work!

Please upgrade today!