Home Tutorials Wicket Auto Completer example in Wicket

Questions:Ask|Latest

Auto Completer example in Wicket
Posted on: October 6, 2008 By Deepak Kumar

In the previous example of Wicket you have learned how to make "Hello World" application 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

«Previous Index Next»

Recommend the tutorial

Ask Questions? Discuss: Auto Completer example in Wicket View All Comments

Post your Comment

Comments

Latest
Related
Frameworks
Category