Autocomplete Textbox in JSP

Autocomplete plugin for jQuery can be used to provides list of suggestions, as we type letter/s in our textbox.

Last few days I was breaking my head for auto complete textbox in JSP with autocomplete (v1.3) jQuery plugin.  I had tried all the way, but I was not getting the list on the textbox. Even I posted the problem in DaniWeb, discussion community, but there also I didn’t get any solution.

Later after long try I found the solution. Actually autocomplete v1.1 works with JSP very well, but earlier is not working with JSP.  With v1.1, I got output in this way.

For the given example, I have created a JSP file which will contain a list of country name. If you want to create the list with the data of the database, you will need to select the data from the database and print the data in JSP page with new line after each data.

//list.jsp
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%
	String countries[] = {
						 	"Afghanistan",
							"Albania",
							"Algeria",
							"Andorra",
							"Angola",
							"Antigua and Barbuda",
							"Argentina",
							"Armenia",
							.
							.
							"Yemen",
							"Zambia",
							"Zimbabwe"
							};

	String query = (String)request.getParameter("q");
	//System.out.println("1"+request.getParameterNames().nextElement());
	response.setHeader("Content-Type", "text/html");
	int cnt=1;
	for(int i=0;i<countries.length;i++)
	{
		if(countries[i].toUpperCase().startsWith(query.toUpperCase()))
		{
			out.print(countries[i]+"\n");
			if(cnt>=10)
				break;
			cnt++;
		}
	}
%>

Then we have a JSP or HTML page which will request to the server side page autocomplete function of autocomplete plugin.

//index.jsp
<!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/style.css" />
	<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
	<script src="JS/jquery.autocomplete.js"></script>
</head>
<body>
	<div style="width: 300px; margin: 50px auto;">
		<b>Country</b>   : <input type="text" id="country" name="country" class="input_text"/>
	</div>

</body>
<script>
	jQuery(function(){
		$("#country").autocomplete("list.jsp");
	});
</script>
</html>

I have used the following styles to make it suitable for my site. You can modify according to your requirements.

.ac_results {
 padding: 0px;
 border: 1px solid #ff7c08;
 background-color: white;
 overflow: hidden;
}

.ac_results ul {
 width: 100%;
 list-style-position: outside;
 list-style: none;
 padding: 0;
 margin: 0;
}

.ac_results li {
 margin: 0px;
 padding: 2px 5px;
 cursor: default;
 display: block;
 color: #972800;
 font-family:Arial, Helvetica, sans-serif;
 /*
 if width will be 100% horizontal scrollbar will apear
 when scroll mode will be used
 */
 /*width: 100%;*/
 font-size: 12px;
 /*
 it is very important, if line-height not setted or setted
 in relative units scroll will be broken in firefox
 */
 line-height: 16px;
 overflow: hidden;

}

.ac_loading {
 background: white url(../images/indicator.gif) right center no-repeat;
}

.ac_odd {
 background-color: #fef2d8;
}

.ac_over {
 background-color: #febb80;
 color: white;
}

.input_text{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 border:1px solid #FF7C08;
 padding:2px;
 width:150px;
 color:#802900;
 background:white url(../images/search.png) no-repeat 3px 2px;
 padding-left:17px;
}

Demo can be viewed here.

Source files are available here.

Some extra features could be possible from earlier version of autocomplete, So if anyone find the solution in newer vision, please do comment me.