Auto Completer example in Wicket

In the previous example of Wicket you have learned how to make "Hello World" application in Wicket.

Auto Completer example in Wicket

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