How to filter a list based on an input field?

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 value开发者_Python百科s 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?

---

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

---

why to re invent the wheel RichFaces already provide this