JQuery Autocomplete Box in java Dynamic web application using MySQL

          This post is going to demonstrate how to implement auto complete box in a dynamic web project in java .To implement auto complete text box  in this web application i have used Java,Servlets,MySQl database,JSON and last but very important Jquery.At first have a glance at the directory structure in your Dynamic web application of eclipse.

1)Directory Structure.

2)Download project from this link Download.And import the project into your Eclipse
3)Now lets start with Database here.Create a java class under com.DataSource.mysql package in your project.The code looks like this.

package com.DataSource.mysql;

import java.sql.DriverManager;
import java.sql.SQLException;

import com.mysql.jdbc.Connection;

public class DataSource {
 private static DataSource ds=null;
 private static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";  
         //Change the database name,username,password as per your database design 
 private static final String DB_URL = "jdbc:mysql://localhost/naveen";
 private static final String USER = "root";
 private static final String PASS = "root";
 private DataSource(){
  
 }
    public static DataSource getInstace(){
     if(ds==null){
      ds=new DataSource();
     }
     return ds;
    }
    public static Connection getConnection(){
     Connection conn = null;
        try{
           Class.forName("com.mysql.jdbc.Driver");
           System.out.println("Connecting to database...");
           conn = (Connection) DriverManager.getConnection(DB_URL,USER,PASS);
        }catch(Exception e){
         try {
    conn.close();
   } catch (SQLException e1) {
    e1.printStackTrace();
   }
         e.printStackTrace();
        }
    return conn;
    }
}

4)Now create a Servlet AutoComplete.java

package com.autocomplete.sample;

import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;

import com.DataSource.mysql.DataSource;

/**
 * Servlet implementation class AutoComplete
 */

public class AutoComplete extends HttpServlet {
 private static final long serialVersionUID = 1L;

    public AutoComplete() {
        super();

    }
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  ArrayList al=new ArrayList();
  try{
  DataSource ds=DataSource.getInstace();
      Connection conn=ds.getConnection();
      Statement stmt=conn.createStatement();
      String sql="select name from customers";
      ResultSet rs = stmt.executeQuery(sql);
      while(rs.next()){
       al.add(rs.getString("name"));
      }
      rs.close();
      stmt.close();
      conn.close();
  }catch(Exception e){
   e.printStackTrace();
  }
   JSONArray json=new JSONArray(al);
   response.setContentType("application/json");
         response.getWriter().print(json);
 }   
}

5)Now configure your web.xml file as below.

  AutoCompleteBox
  
    home.jsp
  
  
    Auto
    com.autocomplete.sample.AutoComplete
  
  
     Auto
     /Auto
  

6)Now create a home.jsp page under WebContent folder

  
  
  
  
  
  


 

  Tags: 
  

7)Drop the dependency jars under WEB-INF/lib folder .Here I have created a tables customers under my schema and retrieving all the names and sending it to jsp as Json object.So you can design your own tables and databases and change the query in the statement in above mentioned class and use it .If you had anny issues in executing this or any exceptions that are interrupting you please let me know here in comment box below.
8)And the output of the application looks like this

Thank you Have a nice day