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
精彩评论