Ajax - Using Ajax Tags

You might have heard of Auto complete in many applications and web sites, where you need to select a option instead from combo box. A simple example is of Airline site where you will select your Destination airport and origin airport.



From developer’s perspective, the implementation of Auto complete option was being made easy day by day. And now by the use of Ajaxtags, the auto complete option was made much easier than the easiest.



Ajaxtags is open source, which can be downloaded from http://ajaxtags.sourceforge.net/.



With the use of Ajaxtags, we can perform the following Ajax operations just by using a simple tag.

•AutoComplete
•Callout
•Tree
•Update
•Tab Panel/Tab
•Toggle
•Select Dropdown.


In this article will explain you Autocomplete tag.



To implement autocomplete option for a text field using Ajax tags, you just need to write a small piece of code in the server side either using servlet or using struts action class, and call the server side action using the Autocomplete tag.



Following are some of the attributes that are must for Ajax autocomplete tag, for complete reference of tag attributes please refer http://ajaxtags.sourceforge.net/usage.html.




Attribute
Required
Detail

baseUrl
yes
Url of server side action class or servlet that gives the list of values.

Source
Yes
Text field where the user enters the search string

Target
Yes
Text field where the autocomplete selection will be populated

Parameters
Yes
List of comma separated parameters that will be passed to the server side.









First we need to design a form which has a text field and we will implement auto complete option for it.



Following is the JSP page that contains a form having a text field and Ajax Autocomplete tag. Make sure to add the autocomplete tag outside the form tag.

<%@ taglib uri="http://ajaxtags.sourceforge.net/tags/ajaxtags" prefix="ajax" %>

ajax:autocomplete example

Country Name:

You can see a list of script file imported at the top of the JSP page. You can get those script file when you download ajaxtags. Make sure that the script files are imported in the following order else, you will get script error. Next we will write a servlet code that serves as the value for the autcomplete options.



import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



import net.sourceforge.ajaxtags.servlets.BaseAjaxServlet;

import net.sourceforge.ajaxtags.xml.AjaxXmlBuilder;



public class Ajaxservlet extends BaseAjaxServlet{





public String getXmlContent(HttpServletRequest request,

HttpServletResponse response) throws Exception {

System.out.println("Inside Base ajax Servlet");

System.out.println("Request: "+request.getParameter("country"));

AjaxXmlBuilder temp=new AjaxXmlBuilder();

temp.addItem("Angola", "angola");

temp.addItem("Angola1", "UK");

temp.addItem("Angola2", "USA");

String country=temp.toString();

return country;

}



}



Here in this servlet we are adding the value in name value pair, to ajaxxmlbuilder. When the servlet is called , the response of this servlet will be in XML format.



Make this as a war file and deploy it in a web container. You can see the autcomplete working for the text field defined.