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

发布于 2024-11-09 03:26:38 字数 792 浏览 0 评论 0原文

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

原文

I have a JSF 2.0 application with a basic search bar with a list of contacts that is updated on keyup so that only the values that match the text in the search bar are displayed.

<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>

I would like it to be fast so I want to implement it with JavaScript/jQuery.
I'm new to the JavaScript/jQuery world, so I could use a little help with this.
How could I do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可可 2024-11-16 03:26:38

按如下方式更新视图（添加

<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();
        }
    });
});

Update the view as follows (added <ul>, used <ui:repeat> instead of <c:forEach>, removed some unnecessary <h:panelGroup>s to minimize noise, the <h:form> is also not necessary since there's nothing which needs to be submitted to the server side)

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

And use this script to filter the list:

$('#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();
        }
    });
});

回复收藏 0 原文