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.