jQuery Autocomplete Field Sample Code (Using Plugins)

1. Auto complete plugin - http://www.pengoworks.com/workshop/jquery/autocomplete.htm
2. Javascript:
<script type="text/javascript">

/** AJAX - Call back
This function will submit the form when any item is selected from the autocompleted text field
@param li - item submited from the autocomplete field
*/

function findValue(li) {
if( li == null ){
return;
}

var selectedValue;
if( !!li.extra ){
selectedValue = li.extra[0];
}
else {
selectedValue = li.selectValue;
}
j$("studentNameQS").value=j$("studentName").value;
// Action class method name
j$("testForm").action = "showStudentDetailsById.xhtml";
j$("testForm").submit();

}

/** AJAX - Call back
A JavaScript function that will be called when an item is selected. The autocompleter will specify a single argument, being the LI element selected.
This LI element will have an attribute "extra" that contains an array of all cells that the backend specified.
@param li - item submited from the autocomplete field
*/
function selectItem(li) {
findValue(li);
}


/** AJAX - Call back
A JavaScript function that will be called when item are populated in the select box.
@param row - item in string format laying inbetween line separator.
*/

function displayItem (row) {
return row[0];
}

/** AJAX - Call back
A JavaScript funcion that can provide advanced markup for an item. For each row of results, this function will be called.
The returned value will be displayed inside an LI element in the results list.
Autocompleter will provide 3 parameters:
the results row,
the position of the row in the list of results,
and the number of items in the list of results.
@param row - item in string format laying inbetween line separator.
*/

function formatItem(row) {
return row[0];
}

j$(document).ready(function() {
// Register autocomplete plugin with the given textfield id i.e. #studentNameQS once the DOM is ready.
j$("#studentNameQS").autocomplete(
"findStudentDetails.xhtml", // URL
{
delay:10,
minChars:4,
matchSubset:1,
matchContains:1,
cacheLength:10,
maxItemsToShow:10,
formatItem:formatItem,
onItemSelect:selectItem,
onFindValue:findValue,
lineSeparator:'|',
cellSeparator: '~',
autoFill:true
}
);
});
</script>

3. Form:

<s:form name="ajaxStudentForm" id="ajaxStudentForm" action="showStudentDetailsById.xhtml">
<s:hidden name="studentNameQS"/>

</s:form>

<input id="studentName" type="text" maxlength="254" size="55"/>

4. Action Class

/**
* Method to get Student Name based on the Search criteria
* It is used for the Student Name Quick search functionality i.e. to show available names during typing
*
* @return String
* @throws Exception
*/
public String findStudentNames() throws Exception{

response.setContentType("text");
response.setHeader("Cache-Control", "no-cache");
// "searchQuery" is constructed by jquery-autocomplete.js - makeUrl()
// Should be verify in makeUrl(); what is used for the parameter
studentNameWildCard = request.getParameter("searchQuery");

// There is nothing supplied for RoleName
if (studentNameWildCard == null) {
response.getWriter().write("");
return null;
}

//Get the data from DB Based on the wild card chars

StringBuilder studentNameIds = new StringBuilder();

// Going to construct (ROLENAME~ID) like "|ABC~123|BCD~234|CDE~345|"
String[] staticNames = new String[ABC~123|BCD~234|CDE~345|]
// Put pipeline (|) as a line separator
studentNameIds.append("|");
studentNameIds.append("Ram");
// Put tild (~) as a cell separator
studentNameIds.append("~");
studentNameIds.append(1);
studentNameIds.append("|");
studentNameIds.append("Shiv");
// Put tild (~) as a cell separator
studentNameIds.append("~");
studentNameIds.append(2);

response.getWriter().write(studentNameIds.toString());
return null;
}