Sickdesigner.com

The work & fun of web designer Radu Chelariu.

Menu

Experiments, ideas & things done just for the fun of it

Contact me

Feel free to get in touch with me if you want to hire me (design work, speaking engagements, guest posting), interviews, if you have a problem with either Photoshop, HTML, CSS or Wordpress, or if you just want to talk about design. I'm also available on Twitter, Facebook or Google+, if that's more your game.

But, for the love of all that is Bauhaus, please do not contact me if you're selling something or about link exchanges and that kind of stuff. I will not reply to these requests.

Input filtering, Quicksand style

If you’re not familiar with Quicksand, well, prepare to have your mind blown, because it’s the cat’s pajamas, kids. Seriously, it’s a very cool plugin, capable of some very fancy visual sorting.

But, as cool as Quicksand is, it does lack in some departments. Most notably, for me, it sorts through lists based on preset filters, not based on user input. And that’s quite a shame, really. How cool would it be to sort seamlessly through a list of items by just typing in an input. So, I set out to do exactly that.

For a live demo, check out the blog listing here.

Do note that this is not a Quicksand patch script. My script has no other dependencies other than jQuery itself. Mostly, this is so because I can’t make heads or tails of Quicksand’s inner workings, and when that happens, I, usually, just do things my own way. May not be the best way, but it’s the best I can do with my limited knowledge of JavaScript.

Let’s get started on this bad boy.

Some basic HTML

We’ll be using the data-* attribute to hold all the meta information about each item. We’ll be using this information, which can be a fair bit more verbose than what other attributes can hold, to sort through the list.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- An input wherein you can type your filter -->
<input id="type-me" type="text" />

<!-- A list of items to sort out -->
<!-- I used a bunch of cars. You can use whatever you want. -->
<ul>
<ul><!-- Three roadsters -->
    <li data-sort="roadster Wiesmann Roadster MF4"><img src="img/mf4.jpg" alt="Wiesmann Roadster MF4" /></li>
    <li data-sort="roadster Mercedes SLK"><img src="img/slk.jpg" alt="Mercedes SLK" /></li>
    <li data-sort="roadster Mazda MX5"><img src="img/mx5.jpg" alt="Mazda MX5" /></li>
</ul>
</ul>
<!-- Three sports cars -->
<ul>
<ul>
    <li data-sort="sports car Lamborghini Aventador"><img src="img/aventador.jpg" alt="Lamborghini Aventador" /></li>
    <li data-sort="sports car Aston Martin DB9"><img src="img/db9.jpg" alt="Aston Martin DB9" /></li>
    <li data-sort="sports car electric BMW i8"><img src="img/i8.jpg" alt="BMW i8" /></li>
</ul>
</ul>
<!-- Three sedans -->
<ul>
<ul>
    <li data-sort="sedan car Mazda 3"><img src="img/mazda3.jpg" alt="Mazda 3" /></li>
    <li data-sort="sedan car Volkswagen Passat"><img src="img/passat.jpg" alt="Volkswagen Passat" /></li>
    <li data-sort="sedan car Mercedes C Klasse"><img src="img/c-klasse.jpg" alt="Mercedes C Klasse" /></li>
</ul>
</ul>
<!-- And three SUVs -->
<ul id="filter-me">
    <li data-sort="suv BMW Hybrid X6"><img src="img/x6.jpg" alt="BMW Hybrid X6" /></li>
    <li data-sort="suv Honda CRV"><img src="img/crv.jpg" alt="Honda CRV" /></li>
    <li data-sort="suv Land Rover Range Rover Evoque"><img src="img/evoque.jpg" alt="Land Rover Range Rover Evoque" /></li>
</ul>

Some not so special CSS

You can use whatever CSS you want as there are no actual CSS dependencies with this script, so you can style whatever pleases your retinas. Seriously, whatever floats your boat. Get creative!

The JS to make it all work

Read the comments in the script to get an idea of how I made it work. Or reverse engineer the script in my blog listing page, if that’s more up your alley.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Make sure everything's all nice and loaded before running the script
$(document).ready(function() {

// After each new character has been typed...
$('#type-me').keyup(function(){

// Pass whatever's in the input to a variable...
var sortQuery = $(this).val();

// Iterate through all the list items
$('#filter-me li').each(function(){

// Get each list item's data-* attribute value
var dataSortValue = $(this).attr('data-sort');

// Create a new regular expression from the user input data
reg = new RegExp('\('+sortQuery+'\)' , 'gi');

// Match the user input to the data-* value
if (dataSortValue.match(reg)) {
$(this).fadeIn(300); // If it matches, keep it.
}
else{
$(this).fadeOut(300); // If it doesn't match, bin it.
}

});
});
});

I liked this so much, I used it on the Blog Page of this website. Feel free to sort through posts by just typing in the input at the top. Quick tip: the data-* attribute in the Blog Page holds the title and excerpt of each post, which should be enough for basic sorting.

Cheers, all!

3 Comments so far

  1. Ben says:

    Great post, will try and use in an upcoming project!

    Just wondering what color scheme your syntax highlighter is using in the blocks of code above? I’d love to know :)

    Cheers,
    Ben

  2. Philippe says:

    I’ve got nothing to say! It is just awesome! Thanks

Speak your mind