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

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!

Solution

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();
});