Simple Data Filtering Using jQuery

In this short tutorial we'll look at an extremely quick and simple way to filter data without the need for unnecessary database calls or page refreshes.

Our HTML and CSS Structure

We'll begin with a simple bit of HTML and CSS to get the layout of our page looking presentable. As with all projects I work on I like to level the playing field slightly with a CSS reset snippet, in this case we'll be using the popular example by Eric Meyer.

CSS

/* 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; }
/*- -*/

With our CSS reset in place we will now have a better starting point to work from as some of the random browser inconsistencies have been ironed out. To control our filtering we need to style up a simple set of buttons, for this we'll be using the ever useful unordered list syntax.

CSS

/*- 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; }
/*- -*/

HTML

<ul id="filterOptions">
    <li class="active"><a href="#" class="all">All</a></li>
    <li><a href="#" class="prem">Premier League</a></li>
    <li><a href="#" class="champ">Championship</a></li>
    <li><a href="#" class="league1">League 1</a></li>
    <li><a href="#" class="league2">League 2</a></li>
</ul>

You'll notice from our CSS and HTML markup that we have added a different class to each of our link elements, these will be used later in our jQuery to indicate which items are to be filtered out (or hidden) and which items we are to show.  An active state has also been added to the active li element so it's clear to the user which parameter we are filtering by.

Now we move on to styling our target data. For each target item in this example I have simply used an image, followed by a h3 tag and then surrounded it with a fixed width and height div element (just to keep everything together nicely).

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 league2">
    <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
    <h3>Accrington Stanley</h3>
  </div>
  <div class="item prem">
    <img src="images/arsenal.jpg" alt="Arsenal" />
    <h3>Arsenal</h3>
  </div>
  <div class="item league2">
    <img src="images/burton-albion.jpg" alt="Burton Albion" />
    <h3>Burton Albion</h3>
  </div>
...
</div>

You may have noticed that each of our items has an additional class assigned to it which matches up to the classes assigned to our filter options links, this is how we'll know which items to show when a filtered link is clicked. This will become much clearer as we move on to our next step, adding our jQuery.

Our jQuery

We can now link to the jQuery library. I have chosen to link to Google's CDN hosted copy of jQuery in this example (more detail into the benefit of such aproach can be found here), the following snippet is then placed in between our web pages head tags (<head></head>).

HTML

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

Next up we need to add a sprinkling of jQuery magic to display the specified items.  As default all items are displayed, when the visitor clicks on one of our filter option links our jQuery fetches the class of the clicked element and assigns it to the ourClass variable. After discovering the ourClass variable we 'deactivate' all of the filter option elements and reassign the active class to the clicked filter option element (this just makes it a little clear to the visitor what they are filtering by). Next up we determine whether the user has clicked the 'all' filter option, if so we show all items with the class of item (in this case all of our items) otherwise we hide all items that do not have our required ourClass value assigned and show all items that do (e.g. if the user clicks on Championship we then hide all items that do not have the championship class, and show all that do). Finally, to stop the page jumping back to the top we return false.

jQuery

$(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;
  });
});

It's as simple as that! I have used a slightly more complex implementation of this technique on the tours search results page of a travel website I worked on recently - Bamboo Travel.

Next up we'll look at adding some sexy transitions to manipulate our data set when a filter request is made.