Фильтровать «список» div с Javascript

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.

Answer 2

Крейг очень близко. Поставьте ".parent ()" перед ".hide ()" или ".show ()", чтобы показать или скрыть родительский div.

Что касается вашего второго комментария, это отдельная проблема, но да, вам нужно будет учитывать нетекстовый ввод. Другая идея - показать все, если текстовое поле фильтра пусто.