Using JavaScript and Ajax - Stripes...and Java Web Development is Fun Again - page 341

Figure 15.11: Filtering the contact list
Filtering the Contact List
As the user types characters in the Filter field, the contact list is fil-
tered to show only the contacts for whom either the first name or the
last name starts with the letters in the filter. An example is shown in
Figure 15.11 .
We can use a plain HTML text field with an onkeyup= event:
Download email_36/web/WEB-INF/jsp/contact_list.jsp
<s:url var="url"
beanclass="stripesbook.action.ContactListActionBean"/>
<fmt:message key="contactList.filter"/> :
<input type="text" onkeyup="filterContacts(this, '${url}');"/>
The filterContacts ( ) JavaScript method receives the text field and the
URL to ContactListActionBean . A simple Ajax request to the findByName ( )
event handler is made, passing the characters from the text field via the
filter parameter. The response is the page fragment with the filtered con-
tact table. It's easy to place the fragment back with a jQuery selector:
'#contact_table' refers to the element with id="contact_table" .
Download email_36/web/js/contact_list.js
function filterContacts(field, url) {
$.get(url,
{ 'filter': $(field). val (),
'_eventName': 'findByName'
},
function (data) {
$('#contact_table').html(data);
}
);
}