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!
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Breezi Comming Soon page - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice tuts. As always !
in the overview u tell to the users that u renew ur site
Gonna see the video, i hope as usual it rocks…
Where is the download link for a offline viewers like me?
Thanks for reminding me! Just added the download link underneath the video.
you are always welcome JW!
Thanks for the tut…
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.
Nice job this is very useful!
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.
Hey Mike. Usually – you will do it via an AJAX request to your database. But this is a quick – and static – alternative.
Yes, loading too many rows of data and hiding showing with js may be costly in terms of resources.
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.)
Besides, I’d rather have that content on my page for the search engine to spider.
Wow! Rehash much? You have another tutorial almost like this.
http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
Thanks JW!!
Keep going on
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.
90% is also to subtle to show up on screencasts btw :/
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.
Looks like you need to calibrate your screen
hehe by definition, it’ll be a flat gray 
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?
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.
Okay, fixed. Thanks! The demo/src/article have been updated.
Will the latest CI and this screencast be in iTunes soon?
Thank you Jeffrey
for that quick fix! (your post above).
Works great now – easy, clear & simple to implement…
SFdude
Is there a method of doing this where it will (at least) degrade with some sort of grace ..?
Just responded to you below.
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!
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..?
@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?
“Without JavaScript disabled”… lol, you mean With Javascript Disabled.
Hi Jeff,
I have been waiting for CI since long…
Hi Jeff,
Me too, Please come soon with the pagination tutorial into CI + jQuery.
waiting….
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
Pretty easy, but ok.
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.
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.
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
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 
Great tip..
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.
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.
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!
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.
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.
Maybe phpQuery tutorial next time?
nice one… great inspiration…
I have seen a designers portfolio done in a similar way.
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 ….
Thanks Jeffrey, I’ve learned a lot of jQuery with this
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.
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
[code]
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.
My code srewed up so here it is again:
How to do something great with PHP and HTML
JS
HTML
PHP
Great tutorial! thanks! Very useful!
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
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!