Auto Completer example in Wicket
In the previous example of Wicket you have learned how
to make "Hello World" application in Wicket. In
this section of Wicket tutorial we are going to describe you an example to
create Ajax auto completer in Wicket.
To create Ajax auto completer wicket application we
need three files :
- AutoCompleterApplication.java
- AutoCompleter.java
- AutoCompleter.html
AutoCompleter class extends WebPage. In
this example we have created an object of Form and this form further consists of
AutoCompleteTextField to create Ajax auto complete text field. Here is
the full code of AutoCompleter.java as follows:
AutoCompleter.java
package com.roseindia.wicket;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Iterator;
import java.util.List;
import java.util.Locale;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormSubmitBehavior;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.string.Strings;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.extensions.ajax.markup
.html.autocomplete.AutoCompleteTextField;
public class AutoCompleter extends WebPage
{
public AutoCompleter()
{
Form form = new Form("form");
add(form);
final AutoCompleteTextField field =
new AutoCompleteTextField("auto", new Model(""))
{
protected Iterator getChoices(String input)
{
if (Strings.isEmpty(input))
{
return Collections.EMPTY_LIST.iterator();
}
List choices = new ArrayList(10);
Locale[] locales = Locale.getAvailableLocales();
for (int i = 0; i < locales.length; i++)
{
final Locale locale = locales[i];
final String country = locale.getDisplayCountry();
if (country.toUpperCase().startsWith(input.toUpperCase()))
{
choices.add(country);
if (choices.size() == 10)
{
break;
}
}
}
return choices.iterator();
}
};
form.add(field);
final Label label = new
Label("selectedValue", field.getModel());
label.setOutputMarkupId(true);
form.add(label);
field.add(new AjaxFormSubmitBehavior(form, "onchange")
{
protected void onSubmit(AjaxRequestTarget target)
{
target.addComponent(label);
}
@Override
protected void onError(AjaxRequestTarget target)
{
}
});
}
}
|
AutoCompleterApplication calls AutoCompleter
class when it returns AutoCompleter class via getHomePage() method.
Here is the example code as follows:
AutoCompleterApplication.java
package com.roseindia.wicket;
import org.apache.wicket.protocol.http.WebApplication;
public class AutoCompleterApplication
extends WebApplication {
public AutoCompleterApplication() {
}
public Class getHomePage(){
return AutoCompleter.class;
}
}
|
Now in the HTML file the auto completer text field is
displayed with the wicket identifier "auto".
AutoCompleter.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
The textfield below will autocomplete country names
<br><hr>
<form wicket:id="form">
Selected value is: <span wicket:id="selectedValue"></span>
<br/>
Country: <input type="text" wicket:id="auto" size="20"/>
</form>
</body>
</html>
|
To run this example one more thing you need to do is to
create entry of AutoCompleteraApplication in XML file web.xml. Following
lines of code is to be written in web.xml
<filter>
<filter-name>AutoCompleterApplication</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
<init-param>
<param-name>
applicationClassName
</param-name>
<param-value>
com.roseindia.wicket.AutoCompleterApplication
</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>2</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>
AutoCompleterApplication
</filter-name>
<url-pattern>
/wicket/ajaxauto/*
</url-pattern>
</filter-mapping> |
Output:
Download Source Code
