Как отфильтровать список на основе поля ввода?

#javascript #jquery #html #jsf-2

#javascript #jquery #HTML #jsf-2

Вопрос:

У меня есть приложение JSF 2.0 с базовой панелью поиска со списком контактов, который обновляется keyup , так что отображаются только значения, соответствующие тексту в строке поиска.

 <h:panelGroup id="contacts_tab_contacts_list">
    <h:form id="search_bar_form">
        <h:panelGroup id="contacts_tab_search_bar">
            <h:inputText id="search_bar_text"/>
        </h:panelGroup>
    </h:form>
    <c:forEach items="#{currentDevice.contacts}" var="contact">
        <li>
            <h:panelGroup id="contact_#{contact.phoneNumber}">
                <h:outputText value="#{contact.phoneNumber}" />
            </h:panelGroup>
        </li>
    </c:forEach>
</h:panelGroup>

Я хотел бы, чтобы это было быстро, поэтому я хочу реализовать это с помощью JavaScript / jQuery.
Я новичок в мире JavaScript / jQuery, поэтому мне не помешала бы небольшая помощь с этим.
Как я мог это сделать?

1. взгляните на это : jqueryui.com/demos/autocomplete

2. Спасибо @JohnP, я хочу посмотреть, смогу ли я понять, как реализовать это в моем проекте (поскольку автозаполнение — хорошая функция, но это не совсем то, что мне нужно)

3. не могли бы вы быть более конкретными? когда вы говорите, что вам нужно решение на стороне клиента, означает ли это, что данные (контакты) уже загружены на страницу, и вам просто нужно выполнить поиск по ним в регулярных выражениях, или вы имеете в виду использование ajax для достижения цели?

4. Как вы сказали, список будет загружен на клиент и будет отфильтрован с помощью панели поиска с использованием Ajax.

Ответ №1:

Обновите представление следующим образом (добавлены <ul> , использованы <ui:repeat> вместо <c:forEach> , удалены некоторые ненужные <h:panelGroup> элементы для минимизации шума, <h:form> также не требуется, поскольку нет ничего, что нужно отправлять на серверную часть)

 <input id="search" />
<ul id="contacts">
    <ui:repeat value="#{currentDevice.contacts}" var="contact">
        <li>#{contact.phoneNumber}</li>
    </ui:repeat>
</ul>

И используйте этот скрипт для фильтрации списка:

 $('#search').keyup(function() {
    var $search = $(this).val();
    $('#contacts li').each(function() {
        var $li = $(this);
        if ($li.text().indexOf($search) > -1) {
            $li.show();
        } else {
            $li.hide();
        }
    });
});

Ответ №2:

зачем заново изобретать колесо RichFaces уже предоставляют это