If you're going to do this, why not just make it an input with autocomplete rather than an input + click on list item?

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/...

Article : http://orderedlist.com/our-writing/blog/articles/live-search...

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.

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 :)

You’re welcome :p

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.