Share on Google+Share on Google+

jQuery auto complete through database using JSP

In this tutorial, we will implement auto complete through database using JSP.

jQuery auto complete through database using JSP

In this tutorial, we will implement auto complete through database using JSP. In this example a text box is given, when you enter name of any Indian state , it will auto complete it , by completing text using JSP. JSP page take the uncompleted text  form text box using "post" method and fetch all the possible value of that uncompleted text. All these things will be done without any plug in.


Transitional//EN" "
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Auto Complete</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
} else {
$.post("states.jsp", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
function fill(thisValue) {
setTimeout("$('#suggestions').hide();", 200);
<style type="text/css">
body {
font-family: Helvetica;
font-size: 13px;
color: #000;
h3 {
margin: 0px;
padding: 0px;
.suggestionsBox {
position: relative;
left: 260px;
margin: 0px 0px 0px 0px;
width: 200px;
background-color: #7845DD;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
.suggestionList {
margin: 0px;
padding: 0px;
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
.suggestionList li:hover {
background-color: #DD45CD;
<div> <h3><font color="red">Indian States</states></font></h3>
<br /> Enter India State Name to see autocomplete
<input type="text" size="30" value="" id="inputString"
onkeyup="lookup(this.value);" onblur="fill();" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">


<%@ page language="java" import="java.sql.*" %>
<% response.setContentType("text/html");%>
String str=request.getParameter("queryString");
try {
String connectionURL = "jdbc:mysql://";
Connection con;
// Get a Connection to the database
con = DriverManager.getConnection(connectionURL, "root", "root");
//Add the data into the database
String sql = "SELECT state FROM states WHERE state LIKE '"
+str+"%' LIMIT 10";
Statement stm = con.createStatement();
ResultSet rs= stm.getResultSet();
while ( ()){
out.println("<li onclick='fill("+rs.getString("state")+");'>"
}}catch(Exception e){
out.println("Exception is ;"+e);


When we enter 'a' , it will show you :

Download Source Code


Posted on: August 5, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.


Advertisement null