Filter "list" of divs with Javascript

Question

I have a repeater that outputs divs like the following for every item returned from some method.

<div class="editor-area">
    <div class="title">the title</div>
    <div>the description</div>
    <div class="bottom-bar">
        <a href="link">Modify</a>
        <a href="link2">Delete</a>
    </div>
</div>

I need to have a textbox on the page that allows the user to filter the list based on what's in the title field. I would like it to happen as the user types.

I could get this done without asking for help, but I want to do it right. I'm using ASP.Net 2.0 WebForms (unfortunately), and I can use jQuery if it would be useful for this (i have very little experience with it).

Any tips or samples would be appreciated.

If the filter operation takes a couple of seconds, how do you keep it from locking up the screen? What event should I do the filter on? Is there anything in jQuery that would make the javascript a little cleaner?

Answer 1

Yes, this is dead simple with jQuery. First hide everything:

$("div.title").hide();

(Matches elements of type "div" with class "title".) Now show the matches:

$("div.title:contains(searchText)").show();

Help for "contains".

It should not take "seconds" to do this unless your page is enormous. You can do this in onKeyDown and onChange.

Answer 2

Craig is very close. Put ".parent()" before ".hide()" or ".show()" to show or hide the parent div.

As for your second comment, that's a separate problem but yes, you'll need to account for non-text input. Another idea is to show everything if the filter textbox is blank.