如何根据输入字段过滤列表？

Question

我有一个带有基本搜索栏的 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 世界的新手，所以我需要一些帮助。 我怎么能这样做？

Answer 1

如下更新视图（添加<ul>，使用<ui:repeat>而不是<c:forEach>，删除了一些不必要的<h:panelGroup>s 以尽量减少噪音，<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();
        }
    });
});

Answer 2

为什么要重新发明轮子RichFaces already provide this