Фильтр «Список» divs с Javascript

Question

У меня есть ретранслятор, который выводит divs как следующий для каждого элемента, возвращаемого каким-то методом.

<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" с классом "название") теперь показывают матчи:

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

Help for "contains".

Он не должен принимать "секунды" для этого, если ваша страница не огромна. Вы можете сделать это в onKeyDown и onChange.

Answer 2

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

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