Filter Data with jQuery
Ever noticed how shopping sites can filter out certain items according to the visitor’s preferences? Here’s a quick and very helpful tutorial 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 to make the layout 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; }
/*- -*/
|
The CSS is divided into 2 parts. The first one uses the CSS reset snippet by Eric Meyer to iron out any potential browser inconsistencies, while the second (labeled “/*- FILTER OPTIONS -*/”) indicates the button styles.
Now for our HTML:
<ul id="filterOptions">
<li><a href="#">All</a></li>
<li><a href="#" >Group 1</a></li>
<li><a href="#" >Group 2</a></li>
<li><a href="#" >Group 3</a></li>
<li><a href="#" >Group 4</a></li>
</ul>
|
A different class is assigned for the link elements because we’ll be using it later in jQuery to indicate the items to be filtered out.
Now we’re going to put a style on the target data (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 everything 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>
<img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
<h3>Accrington Stanley</h3>
</div>
<div>
<img src="images/picture01.jpg" alt="Picture 1" />
<h3>Picture 1</h3>
</div>
<div>
<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.
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 selected.
For the jQuery, 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 the items are displayed by default.
Once the visitor clicks on a filter option link, jQuery will fetch the element class that is clicked on and assign 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 show the visitor what they’re filtering by).
We will also determine if the user has clicked the ‘all’ filter option. If this is the case, then all the items under the same class are shown. Lastly, ‘return false’ should be indicated to prevent the page from automatically scrolling 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;
});
});
|
0
510
