Wednesday, 14 December 2016

Auto Complete Feature Using Servlet, JSP and JQuery

index.jsp

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

</head>
<body>
<div class="header">
<h3> Ajax Autocomplete Feature implementation in Servlet and JSP </h3>
</div>
<br />
<br />
<div class="search-container">
<div class="ui-widget">
<input type="text" id="search" name="search" class="search" />
</div>
</div>
</body>
</html>



style.css

.header {
padding: 10px;
background-color: #4D82CA;
color: white
}

h3 {
font-size: 20px;
margin: 0px;
text-align:center;
}



DBUtility.java

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
Class.forName("com.mysql.jdbc.Driver");
connection=DriverManager.getConnection("jdbc:mysql://localhost/STUDENTS","root","sagan");
return connection;
}
}
}



DataDao.java

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 REGISTRATION  WHERE first  LIKE ?");
ps.setString(1, frameWork + "%");
ResultSet rs = ps.executeQuery();
while (rs.next()) {
data = rs.getString("first");
list.add(data);
}
} catch (Exception e) {
System.out.println(e.getMessage());
}
return list;
}
}


Controller.java

package com.servlet;

import java.io.IOException;
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;
import com.google.gson.Gson;

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

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

response.setContentType("application/json");
try {
String term = request.getParameter("term");
DataDao dataDao = new DataDao();
ArrayList<String> list = dataDao.getFrameWork(term);

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



Output:






2 comments:

  1. What is script src="autocompleter.js" ???

    ReplyDelete
  2. No se manda nada al index, todo me sale bien la conexion y todo pero no me muestra los resultados , la tabla la hice con REGISTRATIO y el campo es first pero no sale ningun dato almacenado ahi

    ReplyDelete