The Apache Sandbox project tries to add new components to the Tomahawk project, and we are interested in components that come with AJAX support, such as the inputSuggestAjax component, which is a tag that defines an autosuggest control complete with Ajax binding.
We have developed this recipe with NetBeans 6.8, JSF 1.2, and GlassFish v3. The JSF 1.2 classes were obtained from the NetBeans JSF 1.2 bundled library. In addition, we have used Apache MyFaces Tomahawk Sandbox 1.1.9, which provides support for JSF 1.2. You can download this distribution from http://myfaces.apache.org/sandbox/index.html. The Apache MyFaces Tomahawk Sandbox libraries (including necessary dependencies) are in the book code bundle, under the /JSF_libs/Apache Tomahawk Sandbox—JSF 1.2 folder.
The inputSuggestAjax component allows you to do real-time auto-completion using asynchronous server requests. Firstly, let's mention the tag's main attributes (there are many more attributes and they can be seen in the official documentation that comes with the product):
|
Name |
Required |
Description |
|---|---|---|
|
|
No |
The control id. |
|
|
No |
Reference to the method that returns the suggested items. |
|
|
No |
Maximum number of suggested entries. |
|
|
No |
The initial value of this component. |
|
|
No |
According to official documentation "the binding into a control object, this binding is needed because the control object does all the needed data transformation between the Ajax control and the backend/frontend". |
Now, the most used syntax is:
<s:inputSuggestAjax id="id" binding="control binding" suggestedItemsMethod="backend bean callback method" value="backend bean property"/>
Keeping in mind the previous syntax, we have developed a simple JSF page as shown next:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s"%>
<html>
<head>
<title>Use the s:inputSuggestAjax tag</title>
</head>
<body>
<f:view>
<h:form prependId="false">
<br />
<h:outputText value="Enter Name:"/><br/>
<s:inputSuggestAjax
suggestedItemsMethod="#{namesBean.getSuggestedNames}"
value="#{namesBean.name}" />
</h:form>
</f:view>
</body>
</html>
And the NamesBean is:
package bean;
import java.util.ArrayList;
import java.util.List;
import java.util.Iterator;
public class NamesBean {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<String> getSuggestedNames(String nume)
{
List<String> list = new ArrayList<String>();
list.add("Alyn");
list.add("Andrey");
list.add("Mike");
list.add("Tom");
list.add("Susana");
List<String> selectedNames = new ArrayList<String>();
Iterator<String> iterator = list.iterator();
while (iterator.hasNext())
{
String currentName = (String)iterator.next();
if((currentName.toLowerCase()).startsWith(name.toLowerCase()))
{selectedNames.add(currentName);}
}
return selectedNames;
}
}
