Try Tuts+ Premium, Get Cash Back!
Quick and Easy Filtering with jQuery
videos

Quick and Easy Filtering with jQuery

on Sep 24th 2009 with 52 comments

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.


Sorting Example

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.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • siempre

    Nice tuts. As always !

  • http://laranzjoe.blogspot.com lawrence77

    in the overview u tell to the users that u renew ur site :P

    Gonna see the video, i hope as usual it rocks… :D

    Where is the download link for a offline viewers like me? :(

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks for reminding me! Just added the download link underneath the video. :)

      • http://laranzjoe.blogspot.com lawrence77

        you are always welcome JW!
        Thanks for the tut… :)

      • C.44

        Any chance these vids will be popping up on iTunes soon ? Still waiting for the code igniter vids aswell.

        Btw, this tut has convinced me to finally start learning jquery… about time lol.

  • etrnly

    Nice job this is very useful!

  • Mike Schneider

    I like the idea…I always assumed you would need access to a db to sort/filter. Really gets me thinking about what else I’m doing that could be done easier.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Mike. Usually – you will do it via an AJAX request to your database. But this is a quick – and static – alternative. :)

      • Abhijit

        Yes, loading too many rows of data and hiding showing with js may be costly in terms of resources.

      • Bretticus

        Seriously though, you are returning an extra 50 lines of short phrases at the most (if you return thousands of lines, you may be out of control.) We’re not talking major resources here (especially in the example: the demo and the actual implementation on Jeff’s site.)

      • Bretticus

        Besides, I’d rather have that content on my page for the search engine to spider. ;)

  • Barry
  • Javed Gardezi

    Thanks JW!!
    Keep going on :)

  • Roland

    In TextMate, Ctrl-Shift-D is your friend (Duplicate line) I find it faster than copy/paste when mocking things up :)
    Another useful TextMate key is Ctrl-Shift-W to wrap something in a tag (it defualts to a paragraph… very useful to wrap things in a list item as well as anchor link because it does the both the opening and closing tags in the wrap :)

    I don’t know why you called #e5e5e5 a grayish blue… by my reckoning it is just 90% gray – whenever R = G = B it’s going to be white, a shade of gray, or black.

    • Roland

      90% is also to subtle to show up on screencasts btw :/

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It looks a bit blue to me – but maybe I’m color blind. :) It’s just a hex value that was at the top of my head.

      • http://www.cameronolivier.com Cameron Olivier

        Looks like you need to calibrate your screen ;) hehe by definition, it’ll be a flat gray :)

  • SFdude

    Nice!

    But, if you
    1) load the Demo page
    2) click ALL
    3) click ALL again

    all entries disappear (ie: blank list with no entries),
    and there’s no way to make them ALL appear again
    by simple clicking ALL.

    Well, I believe ALL should show “All entries” when clicked, right?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Oh no. :) Thanks for finding that. I’m pretty sure I know what the problem is. It’s because when it’s reclicked, the anchor tag now has two classes instead of. I’m fixing the code right now.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Okay, fixed. Thanks! The demo/src/article have been updated. :)

  • http://thebookofjoe.com nanochrome

    Will the latest CI and this screencast be in iTunes soon?

  • SFdude

    Thank you Jeffrey
    for that quick fix! (your post above).
    Works great now – easy, clear & simple to implement…

    SFdude

  • Cracks

    Is there a method of doing this where it will (at least) degrade with some sort of grace ..?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Just responded to you below.

  • http://michael.theirwinfamily.net Michael Irwin

    Great tut! I have done something similar, and instead of putting the ul for buttons in a javascript variable, I had it just in the text, and had the CSS hide it. The jQuery would then show it. But, either way works.

    Thanks for the tut!

  • Cracks

    nb: i know you’re method is “quick & dirty”, and isn’t supposed to be graceful. i’m just wondering if anyone knows of a more graceful method of achieving the same filter-type search..?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      @Cracks – What more are you looking for. This filtering isn’t something that can be done with just CSS. Without JavaScript disabled, it just turns into a normal list.

      What more are you expecting?

      • http://www.aqibmushtaq.co.uk Aqib Mushtaq

        “Without JavaScript disabled”… lol, you mean With Javascript Disabled.

  • http://voratec.com Ashit Vora

    Hi Jeff,
    I have been waiting for CI since long… :(

    • Khalil

      Hi Jeff,
      Me too, Please come soon with the pagination tutorial into CI + jQuery.
      waiting….

  • http://www.syntaxriot.com Mathew

    swapping show() for slideDown() and hide() for slideUp() makes the filtering process a little cooler, needs a little more work to make it perfect but you get the idea

  • Deoxys

    Pretty easy, but ok.

  • zaiful

    I don’t think Jeffrey you really think about the readers from poor internet speed regions. I am from Bangladesh and I know about 20-30 from my area who love nettuts and I guess a large number of people from my country regularly follow nettuts and other envato sites.

    We are not able to see these screencasts online with our speed, so normally we use to download them and see them later. Don’t know why these new screencasts from screencast.com are very hard to download, the download speed is too slow and in the end of download it normally shows size mismatch error and sometime timeout error.

    We people here browse internet with 20-30KB speed, previously we could download blip.tv’s flvs at a goot speed of 20KB+ but these screencast.com’s mp4s don’t cross 10-12KB and in the end they just reduce to 1-2KB and cause those errors.

    I guess you may have some advertise agreement thats why you are promoting screencast.com as I didn’t see any wrong with blip.tv, many with agree with it. They were just fine…

    Anyway, I hope you will provide an alternative source for those screencasts.You go with screencast, they are also fine. You just, please, download the mp4 and upload it to another host like rapidshare,megashare or any host of your own etc…Someone uploaded the CI Day-5 CRUD screencast to rapidshare and we could download it from there. We are really missing your great screencasts. I hope you will take some time to think about poor visitors like us and will let us to learn these useful things.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      A few of you mentioned issues with the download speed – which is confusing. But yes – I’ll also be uploading to Blip.tv as well – as an alternative for those with lower download speeds. :)

      • zaiful

        Thanks a lot for your reply..I again tried to download this screencast few hours ago, was going outside so thought to keep my PC busy to download it. I thought it may work this time, who knows?!? (as I thought 9-10 times before for the last 2 CI screencasts). Came back home after 2 hours and that same old story :D Size mismatch error!! Anyway, hope you upload them to Blip.tv and we will get the chance to see them and learn from them. I am really missing them. Please do it man, will be really grateful :)

  • http://www.w2point.com Web 2.0

    Great tip..

  • jem

    Nice tip, I like using CSS classes for filtering like this.

    This might have just been beyond the scope of this tutorial, but it would probably be a better practice (especially if there’s the possibility of being lots of these elements) to cache some of the work thats being done so you’re not having to collect the same elements over and over again.

  • http://www.brettjankord.com Brett Jankord

    Nice, quick, and easy. I’ve been thinking about adding a filtering system to my portfolio when I add more projects. This will come in handy.

  • Bretticus

    Another fine tutorial that shows how you can use jquery to provide interaction to your user while maintaining best search engine practices.

    Excellent! And Thanks again!

  • Bretticus

    By the way…where do these people come from demanding the “next CI” tutorial that is being offered to them completely free? Is this an example of what has been coined the “me generation?” It’s a strange phenomenon to me I guess. That is, people believing they have the right to demand your time without any attachment nor compensation. :)

  • http://www.jeffadams.co.uk Jeff Adams

    I like it’s simplicity – I mean if you just have lists that you want filterable then why pay for hosting for PHP support etc? Good tutorial as always.

  • Aditu

    Maybe phpQuery tutorial next time?

  • http://www.timokoerber.de Timo Körber

    nice one… great inspiration…

  • http://www.quickenwebsites.com Quicken Websites

    I have seen a designers portfolio done in a similar way.

  • almulaiki

    thanks Mr. Jeffery , what attract me to your screencasts is your genorisity when deliver your ideas, truthfully you are the best developer I have learned from.
    go on ….

  • IgnacioRV

    Thanks Jeffrey, I’ve learned a lot of jQuery with this :)

  • http://www.twitter.com/NeilBradley Neil

    Great tute. Glad to see the return of the iTunes feed too. Hopefully some of the other screencasts will be published there too as I’m missing CI from Scratch Day 5 and 6. Easier to watch the iTunes video and test in the browser at the same time.

  • http://www.ortwin.nl orves

    Hi Jef, once again a great tut!
    I wish to use this in my custom made CMS and therefore I have a question;

    Is it possible to filter through a multi level UL-LI structure like so

    How to do something great with PHP and HTML

    JS
    HTML
    PHP

    Users of my CMS get the possibility to manage a multi-language website where every page relates to a curtain language which I then would use in the LI class.

    Your script works fine on a one level structure and I would like to know how I and others can implement this in a multi level structure.

    I hope you, or an other reader, can find the time to answer my question.

  • http://www.quickenwebsites.com Quicken Websites

    Great tutorial! thanks! Very useful!

  • http://www.yvesdesign.ch Yves

    Great Tutorial!

    I have one question:

    Everything works properly. However, I have a list that contains more than one list and a couple of div and when I click to filter, it adds me “style =” display: none “to all child elements … how can I fix this?

    thank you very much

  • Danny

    Jeffrey,

    Great script, thank you for sharing. Do you know of any way of modifying it to do a multy tiered drill down. For example the project I am working on the products need to be organized in a way of what application they can be used in then price range. We are look for about 3 levels of filtering. I am having trouble finding information on how to do this with PHP/MySQL

    Thanks for the help!