Data Filtering Using jQuery

Data Filtering Using jQuery

Keith

Have you ever visited a shopping website and wondered how it can filter out certain items on the list according to your preferences? Well, here’s a quick and very helpful tutorial I picked up that will teach you how to do something similar to that without any need for database calls or page refreshes.

Let’s begin with the CSS structure so as to make the layout look presentable.

/* SIMPLE CSS RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {   margin: 0;   padding: 0;   border: 0;   outline: 0;   font-size: 100%;   vertical-align: baseline;   background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /*- -*/ /*- FILTER OPTIONS -*/ ul#filterOptions {   width: 802px;   height: 52px;   margin: 30px 0;   overflow: hidden; } ul#filterOptions li { height: 52px; margin-right: 2px; float: left; } ul#filterOptions li a {   height: 50px;   padding: 0 20px;   border: 1px solid #999;   background: #cfcfcf;   color: #fff;   font-weight: bold;   line-height: 50px;   text-decoration: none;   display: block; } ul#filterOptions li a:hover { background: #c9c9c9; } ul#filterOptions li.active a { background: #999; } /*- -*/

As you may have noticed, the CSS is divided into 2 parts; in the first one we just used the CSS reset snippet (by Eric Meyer) to iron out any potential browser inconsistencies, while in the second (labeled “/*- FILTER OPTIONS -*/”) we just indicated the styles for the buttons.

Now for our HTML:

<ul id="filterOptions">   <li class="active"><a href="#" class="all">All</a></li>   <li><a href="#" class="group01">Group 1</a></li>   <li><a href="#" class=" group02">Group 2</a></li>   <li><a href="#" class=" group03">Group 3</a></li>   <li><a href="#" class=" group04">Group 4</a></li> </ul>

We have assigned a different class for each of the link elements because we’ll be using it later in jQuery tutorials to indicate which items are to be filtered out.

Now we’re going to put a style on the target data (our list of items to be filtered) with CSS below followed by the updated HTML. In this example, we will assume our items to be image files. The h3 tag is basically for the corresponding names for the images. Both the image and the name are then surrounded by a fixed height and width div element to keep things aligned.

CSS

/*- OUR DATA HOLDER -*/ #ourHolder { width: 800px; height: 850px; overflow: hidden; } #ourHolder div.item {      width: 200px;      height: 200px;      float: left;      text-align: center; } #ourHolder div.item h3 { margin-top: 10px; font-size: 16px; line-height: 20px; } /*- -*/

HTML

<div id="ourHolder">   <div class="item group02">     <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />     <h3>Accrington Stanley</h3>   </div>   <div class="item group01">     <img src="images/picture01.jpg" alt="Picture 1" />     <h3>Picture 1</h3>   </div>   <div class="item group02">     <img src="images/picture002.jpg" alt="Picture 2" />     <h3>Picture 2</h3>   </div> ...            //insert any additional items here </div>

Once you use this code, make sure you rename your jpeg files (picture002.jpg) accordingly.

As you can see, we’ve also added another class (i.e. item group01) to our items which matches up to the classes assigned to our filter options links (class="group01" under “filterOptions”). This will be our reference on which items will be shown once a filtered link is chosen or clicked.

Now it’s time for the jQuery. In this example, we’ll be using a hosted copy of the jQuery that is linked to Google’s CDN. To do this, we’ll place the following snippet within our web page’s <head></head> tag.

HTML

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Next, we need to display the specific items with a few more jQuery. All our items are going to be displayed by default. 

Once the visitor clicks on one of our filter option links, our jQuery will fetch the element class that is clicked on and assigns it to the ourClass variable. After the ourClass variable is discovered we deactivate all the filter option elements and reassign the active class to the clicked filter option element (this will make it clear to the visitor what they're filtering by). 

Next, we determine if the user has clicked the 'all' filter option. If so, then we show all the items under the same class. Lastly, we indicate ‘return false’ to prevent the page from jumping back to the top.

$(document).ready(function() {   $('#filterOptions li a').click(function() {     // fetch the class of the clicked item     var ourClass = $(this).attr('class');     // reset the active class on all the buttons     $('#filterOptions li').removeClass('active');     // update the active state on our clicked button     $(this).parent().addClass('active');     if(ourClass == 'all') {       // show all our items       $('#ourHolder').children('div.item').show();     }     else {       // hide all elements that don't share ourClass       $('#ourHolder').children('div:not(.' + ourClass + ')').hide();       // show all elements that do share ourClass       $('#ourHolder').children('div.' + ourClass).show();     }     return false;   }); });

And that’s it!