How could I do this? Refine search results as I type

Question

I've got a page with a bunch of thumbnails and titles:

http://thenozzle.net/games
(broken link)

If you hit "search", a search bar slides down from above. I can type things into the search box and hit enter to search the website. I was wondering if there was any way to look at all the thumbnails, and if I typed "E" it would hide all the thumbnails except for ones that started with "E". Then I typed "El" and it brought up every result that started with "El". Then I added a "d" and it would bring up every thumbnail with a title starting with "Eld". IN this, users could search the games page easily without having to reload. Is it possible? Worthwhile doing?

I've well-versed in jQuery and PHP. If my explanation didn't do it. Look into Google Instant.

Thanks!

Answer 1

I made something like this a while ago. Here's a link.

What it does is fire this event on every key press, and matches the pressed key with a li that contains it. It works great, but could definitely use some modification. Here's the code:

$("#search").keyup(function(){
    $("li").hide();
   var term = $(this).val();
    $("li:contains('" + term + "')").show();
});

Answer 2

Basically, you have a JS (with jquery) code that performs json calls to retrieve a list of coincidences to the string already typed as it goes. It should show them in a div nearby the input field updating the innerHTML or something like that.

Below, a script/servlet/service that can be called every time with the input.

Example: http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/