In this tutorial you will learn how an autocomplete function can be embedded in a servlet based application using ajax, jquery.
Ajax Jquery Autocomplete Servlet
In this tutorial you will learn how an autocomplete function can be embedded in a servlet based application using ajax, jquery.
To use the autocomplete functionality in my example I use the plugin of jquery, you can also download these plugin from the link I am giving below :
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Now create a html page into which I uses the plugins of jquery and the function ready() that calls the function to invoke. In the body of this function uses the following function $("#text1").autocomplete("AutoCompleteServlet"); here text1 is the textbox id, and AutoCompleteServlet is a servlet class and there is also a textbox which will take the value that the user will give. When in this textbox a character is given the related suggestion value will be displayed in dropdown list these values are coming from the servlet and the suggestion values are showed in dropdown list using the jquery functions.
Then created a servlet class into which I do the hard code of names as a String variable which will displayed as suggestion in the dropdown list. And the other codes for managing these data values such as create a function that will change the case of letters given into the textbox, then created an ArrayList ( ) using which we will find the string values after changing into lower case and add only those values in the ArrayList which are equals after comparing the characters given into the textbox by the user.
In the service method of this example getParameter() method is used for tracking the values and Iterator is used for traversing the values.
Example :
autocomplete.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<script>
$(document).ready(function() {
$("#text1").autocomplete("AutoCompleteServlet");
});
</script>
<style>
input {
font-size: 120%;
}
</style>
</head>
<body>
<h3>Enter text :</h3>
<input type="text" id="text1" name="n"/>
</body>
</html>
AutoCompleteServlet.java
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.StringTokenizer;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AutoCompleteServlet extends HttpServlet
{
private int count;
private List<String> name;
private String data = "Aman, Albela, Ali, Ankit, Azam, Aryan,"+
"Bhumi, Bharat, Bhaskar, Bigul, Chaman, Chaturvedi, Chatrapati," +
"Chitra, Deno, Digboi, Deepak, Doremon, Elepahant, Eagle, Erose," +
"Funny, Fun, Fruit, Galgotia, Ghosle, Gautam, Grish, Honda, Hari," +
"Harsh, Irfan, India, Indu, John, Johny, Jyotsna, Karunya, Kirti," +
"Koshla, Lion, Laugh, Leg, Lotus, Mohan, Marshal, Maurisus, Monaco," +
"Neil, Nelson, Nurul, Omang, Oman, Ozone, Orient, Pawan, Puri, Pushkar," +
"Quraishi, Qutar, Quarter, Ravindra, Rajesh," +
"Rohit, Roshan, Sunil, Surat, Sah, Saurya, Trilok, Tiwari, Top, Torch" +
"UK, USA, Uzbekistan, Vasant, Varun, Vipul, Vaidya, Wasim, Waquar," +
"Xenon, X-Mas, Yemen, Yen, Yokohama, Zero, Zambia,Zimbabwe";
public void init(ServletConfig config)
{
name = new ArrayList<String>();
StringTokenizer st = new StringTokenizer(data, ",");
while(st.hasMoreTokens()) {
name.add(st.nextToken().trim());
}
count = name.size();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out= response.getWriter();
String nm= request.getParameter("q");
List<String> name = getData(nm);
Iterator<String> itr = name.iterator();
while(itr.hasNext()) {
String country = (String)itr.next();
out.println(country);
}
}
public List<String> getData(String nm) {
String country = null;
nm = nm.toLowerCase();
List<String> equal = new ArrayList<String>();
for(int i=0; i<count; i++) {
country = name.get(i).toLowerCase();
if(country.startsWith(nm)) {
equal.add(name.get(i));
}
}
return equal;
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>ajaxWithServlet</display-name> <servlet> <servlet-name>AutoCompleteServlet</servlet-name> <servlet-class>AutoCompleteServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AutoCompleteServlet</servlet-name> <url-pattern>/AutoCompleteServlet</url-pattern> </servlet-mapping> </web-app>
css and script files can be downloaded from download source link.
Output :
When you will execute the above example and enter the character as given into the image given below you will get the output as :
[ 0 ] Comments