articles >> general ajax >> AjaxTags Tutorial (Part 2)

AjaxTags Tutorial (Part 2)

By : Mamun Zaman Jul 09, 2007

Printer friendly

Creating an Autocomplete Textbox

One of the cool tags of AjaxTags is ajax:autocomplete. We will use this tag in this following JSP example.

<fieldset>
<legend>ajax:autocomplete example</legend>
<form>
<label for="country">Country Name: </label>
<input type="text" name="country" id="country"/>
</form>

<ajax:autocomplete
source="country"
target="country"
baseUrl="country_list.view"
parameters="country={country}"
className="autocomplete"
minimumCharacters="1"/>
</fieldset>

Our objective here is to make an autocomplete for the textbox country. We have a Servlet which will return a list of country names that starts with the value of country textbox.
This tag must appear after the form tag. Attribute source is the id of the input textbox. Attribute target is the id of the target textbox; target may be same as source or different than source. Attribute baseUrl specifies the server side code. One important attribute for ajax:autocomplete is minimumCharacters, it specifies character count after which AjaxTags will request for country_list.view with country name as a parameter.

.autocomplete {
position: absolute;
color: #333333;
background-color: #ffffff;
border: 1px solid #666666;
font-family: Arial;
overflow: hidden;
}

This is a sample style sheets entry for ajax:autocomplete.

Now we need to create the server response for this tag. Sample response would be like following. Assuming we entered ‘A’ in country textbox.

<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<response>
<item>
<name>America</name>
<value>America</value>
</item>
<item>
<name>Angola</name>
<value>Angola</value>
</item>
<item>
<name>Austria</name>
<value>Austria</value>
</item>
<item>
<name>Australia</name>
<value>Australia</value>
</item>
</response>
</ajax-response>

In Part I, I discussed AjaxTags helper classes. First we need to add following import statements in your Servlet code.

import org.ajaxtags.helpers.*;
import org.ajaxtags.servlets.*;

Next you need to extend your class from BaseAjaxServlet.

public class CountryCompleter extends BaseAjaxServlet

BaseAjaxServlet is included in ajaxtags.jar.

We define a string of country names that will be used for autocomplete source.

private static final String countries = "America,Angola,Austria,Australia,Bahama,Bangladesh,Bermuda,Canada,Chad,
Cyprus,Denmark";

We will spilt this string using “,” as separator into an array.

private static final String[] countryNames = countries.split(",");

We need to override getXmlContent function to generate XML response. Here is an example.

public String getXmlContent(HttpServletRequest request,
HttpServletResponse response)
throws Exception {
//Gets country prefix from request object
String countryPrefix = request.getParameter("country");

//Generate country names’ list as XML
String countryList = makeCountryList(countryPrefix);

//Returns XML list as string
return countryList;
}

Now we need to develop a private class named makeCountryList for generating XML response with all the country names starts with the country prefix as entered by the user.

private String makeCountryList (String countryPrefix) {
AjaxXmlBuilder builder = new AjaxXmlBuilder();
for(String country: countryNames) {
if(country.toUpperCase().startsWith
(countryPrefix.toUpperCase())) {
builder.addItem(country, country);
}
}
return builder.toString();
}

Compile the class. Add entries in your web.xml. First a Servlet entry like below.

<servlet>
<servlet-name>CountryCompleter</servlet-name>
<servlet-class>CountryCompleter</servlet-class>
</servlet>

Then add a Servlet mapping entry in web.xml.

<servlet-mapping>
<servlet-name>CountryCompleter</servlet-name>
<url-pattern>/country_list.view</url-pattern>
</servlet-mapping>

You now have everything ready for this example. Try for yourself and you will learn how to use ajax:autocomplete tag.