使用Javascript过滤div的"列表"

Question

我有一个转发器,为某些方法返回的每个项目输出如下所示的div.

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

我需要在页面上有一个文本框,允许用户根据标题字段中的内容过滤列表.我希望它发生在用户输入的时候.

我可以在不寻求帮助的情况下完成这项工作,但我想做得对.我正在使用ASP.Net 2.0 WebForms(不幸的是),如果它对我有用,我可以使用jQuery(我对它的经验很少).

任何提示或样品将不胜感激.

如果过滤操作需要几秒钟,那么如何防止其锁定屏幕？我应该在什么事件上进行过滤？jQuery中有什么能让javascript变得更干净吗？

Answer 1

是的,使用jQuery这很简单.首先隐藏一切:

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

(匹配"div"类型的元素与类"title".)现在显示匹配:

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

帮助"包含".

除非页面很大,否则不应该花费"秒".您可以在onKeyDown和onChange中执行此操作.