
A fast, simple list filter with jQuery - kilian
http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/
======
RyanMcGreal
If you're going to do this, why not just make it an input with autocomplete
rather than an input + click on list item?

------
nirmal
I've seen this done with a Quicksilver style filter as well. Where you don't
have to type a strict substring of any of the items. For example typing "US"
and still seeing "United States of America".

Demo:
[http://static.railstips.org/orderedlist/demos/quicksilverjs/...](http://static.railstips.org/orderedlist/demos/quicksilverjs/jquery.html)

Article : [http://orderedlist.com/our-writing/blog/articles/live-
search...](http://orderedlist.com/our-writing/blog/articles/live-search-with-
quicksilver-style-for-jquery/)

------
Sukotto
If anyone tests this with a long list (like, thousand+ names, every US county,
every weather station, etc) please post some stats on how well it scales.

~~~
kilian
There are a couple of optimizations. You can cache the list, by instead of
doing this:

    
    
      $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
      $(list).find("a:Contains(" + filter + ")").parent().slideDown();
    

you can do this:

    
    
      $matches = $(list).find('a:Contains(' + filter + ')').parent();
      $('li', list).not($matches).slideUp();
      $matches.slideDown();
    

you can get rid of most of the $(), since input, list, etc are jQuery objects
already (I left them in because it makes it easier to read and doesn't have
too big an impact)

Lastly, you could save all countries in an array, give all list items unique
id's corresponding to the array, match on the array and hide/show the id's
that way. You forgo all the DOM interaction until the last moment.

It'll be a while before you get there, though :)

~~~
mathias
You’re welcome :p

------
mcantor
Nice post! The demo really sold me on the technique. Quick nitpicks: On step 4
of the instructions, you wrote "Hide the non-matching ones, while showing the
non-matching ones"; you probably meant to say "matching" in the second clause.
Also, capitalizing the first letter of every word in the first paragraph of
Step 2 makes it very difficult to read.

