Pages Navigation Menu

Coding is much easier than you think

Autocomplete in java web application using Jquery and JSON

This article will describe how to implement jQuery Autocomplete in java web application. jQuery Autcomplete is part of the jQuery UI library which allows converting a normal textbox into an autocompleter textbox by providing a data source for the autocompleter values.
Autocompleter in java
Here when user types a character in text box ,jQuery will fire an ajax request using autocomplete plugin to the controller, this controller(Servlet) in turn call the dao class which connects to the database and returns the required data back as an array list. After getting the data we convert this list to json format and return it back to the success function of our ajax call.



Project Structure

Autocompleter in java project structure

Jsp page

Now create a jsp page with Autocompleter feature and make sure that you referred the jQuery core and jQueryUI libraries.

<!DOCTYPE html>
<meta charset="ISO-8859-1">
<title>Autocomplete in java web application using Jquery and JSON</title>
<script src="//"></script>
<script src="//"></script>
<script src="autocompleter.js"></script>
<link rel="stylesheet" 
<!-- User defied css -->
<link rel="stylesheet" href="style.css">

<div class="header">
	<h3>Autocomplete in java web application using Jquery and JSON</h3>
<br />
<br />
<div class="search-container">
	<div class="ui-widget">
		<input type="text" id="search" name="search" class="search" />


Recommended reading:


Js file

File: autocompleter.js
In this file we get data from database via ajax and apply autocompleter

$(document).ready(function() {
	$(function() {
		source : function(request, response) {
			url : "SearchController",
			type : "GET",
			data : {
				term : request.term
			dataType : "json",
			success : function(data) {

When a user types a character in text box ,jQuery will fire an ajax request to the controller, in this case controller is SearchController as mentioned in the above js file.


Creating The Controller To Handle Ajax Calls

package com.servlet;

import java.util.ArrayList;

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

import com.dao.DataDao;

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

	protected void doGet(HttpServletRequest request,
		HttpServletResponse response) throws ServletException, IOException {

		try {
			String term = request.getParameter("term");
			System.out.println("Data from ajax call " + term);

			DataDao dataDao = new DataDao();
			ArrayList<String> list = dataDao.getFrameWork(term);

			String searchList = new Gson().toJson(list);
		} catch (Exception e) {

This servlet will call the business class which in turn creates the necessary connection and returns the data back as an array list to the controller. After getting the data we convert it to json format and return it back to the success function of our ajax call.

Do read


Business class

Creating Methods To Get Data From Database

package com.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;

public class DataDao {
	private Connection connection;

	public DataDao() throws Exception {
		connection = DBUtility.getConnection();

	public ArrayList<String> getFrameWork(String frameWork) {
	ArrayList<String> list = new ArrayList<String>();
	PreparedStatement ps = null;
	String data;
	try {
	ps = connection.prepareStatement("SELECT * FROM JAVA_FRAMEWORK  WHERE FRAMEWORK  LIKE ?");
		ps.setString(1, frameWork + "%");
		ResultSet rs = ps.executeQuery();
		while ( {
			data = rs.getString("FRAMEWORK");
	} catch (Exception e) {
	return list;


Data Access object

Connecting To Database Using JDBC

package com.dao;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBUtility {
	private static Connection connection = null;

	public static Connection getConnection() throws Exception {
		if (connection != null)
			return connection;
		else {
			// Store the database URL in a string
			String serverName = "";
			String portNumber = "1521";
			String sid = "XE";
			String dbUrl = "jdbc:oracle:thin:@" + serverName + ":" + portNumber
					+ ":" + sid;

			// set the url, username and password for the databse
			connection = DriverManager.getConnection(dbUrl, "system", "admin");
			return connection;



Make sure you have done servlet mapping properly in web.xml file. An example of this is given below,




Autocompleter in java

About Mohaideen Jamil

I'm a Full stack developer of IT exp in J2EE, AngularJs, MicroServices, Docker, Spring (Boot, MVC, Cloud), Bluemix, DevOps. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

%d bloggers like this: