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>以最大限度地减少噪音，<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

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

2 个答案: