Advertisement
News

Quick and Easy Filtering with jQuery

by

In this week's screencast, we'll learn how to implement quick and dirty filtering without a database. By applying some classes and a touch of jQuery, we can implement a nice little system very quickly.


Overview

Just yesterday, I was asked how I was able to create the simple sorting feature found on the Vault page of my blog. Truthfully, it was done out of haste. Though I'll eventually run everything through a database and sort it that way, for now, I needed a quick and dirty way to do it with JavaScript. I'll show you what I did.

20 Minute Video Tutorial

Other Viewing Options

The Final jQuery

Updated a bit from the video.

var ulOptions = '';
var $links = $('#links');

$links.before(ulOptions)
  		   .children('li')
		   .addClass('all')
		   .filter('li:odd')
		   .addClass('odd');

$('#options li a').click(function() {
	var $this = $(this),
		type = $this.attr('class');

	$links.children('li')
		.removeClass('odd')
		.hide()
		.filter('.' + type)
		.show()
		.filter(':odd')
		.addClass('odd');
				
	return false;
});

Update: Sneaky Little Bug

"SFdude" found a bug where, if you click on the same item twice, the entire list will disappear! Luckily, I was able to determine the problem quickly. The issue was that after the first click, we applied a class of "selected" to the anchor tag. That is what was causing the hiccup. Because now - it had two classes that would not correspond to anything! The fix is to remove these two lines:

$('#options li a').removeClass('selected');
$this.addClass('selected');

Truthfully - they were unnecessary. We can just as easily use the a:focus selector in our stylesheet to accomplish this. :)

a:focus {
 font-weight: bold;
}

And that does it. I've updated the demo and the source code. Thanks to SFdude for finding that sneaky little bug.

So what are your thoughts? Disagree with this method? Is there a better way to do it - without a database? Let me know!

Thank you, Screencast.com!


Screencast.com

...for providing the hosting for these video tutorials.


Related Posts
  • Code
    JavaScript & AJAX
    Connect 4 With Socket.ioSocket io wide retina preview
    Today we'll see how we can use Node.js and Socket.io to create a multiplayer Connect 4 style game.Read More…
  • Code
    JavaScript & AJAX
    JavaScript Tools of the Trade: JSBinJsbin retina preview
    We've all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of:Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 3Indexeddb retina preview
    Welcome to the final part of my IndexedDB series. When I began this series my intent was to explain a technology that is not always the most... friendly one to work with. In fact, when I first tried working with IndexedDB, last year, my initial reaction was somewhat negative ("Somewhat negative" much like the Universe is "somewhat old."). It's been a long journey, but I finally feel somewhat comfortable working with IndexedDB and I respect what it allows. It is still a technology that can't be used everywhere (it sadly missed being added to iOS7), but I truly believe it is a technology folks can learn and make use of today. In this final article, we're going to demonstrate some additional concepts that build upon the "full" demo we built in the last article. To be clear, you must be caught up on the series or this entry will be difficult to follow, so you may also want to check out part one.Read More…
  • Web Design
    Case Studies
    How They Did It: Alice in VideolandAlice retina
    This summer I started building a modern retelling of "Alice in Wonderland", an interactive storybook web app by the name of Alice in Videoland. It ended up being featured in a sister article in Adobe Inspire as well as turning into an encore-winning presentation I gave at CSS Dev Conf 2013. The project was meant to be educational, a testing ground for new CSS animation techniques and desktop-to-tablet JavaScript. I keep Alice's source up on GitHub where anyone can examine my code, but sometimes it's nice to have someone go over the reasoning with you.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Application LogicAudero reader preview2
    This is the second part of the series about Audero Feed Reader. In this article, we'll delve into the business logic of our application and provide additional background on the plugins and API used for our project.Read More…