index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Autocomplete from Database in JSP - Onlyxcodes</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style>
</style>
</head>
<body>
<div class="container" style="overflow: auto;">
<label>Enter Country Name</label>
<input type="text" id="txtCountry" class="form-control" placeholder="enter country name">
<div id="showList">
<ul class="list-group">
</ul>
</div>
<label>Enter age</label>
<input type="text" id="txtCountry2" class="form-control" placeholder="Enter age">
<div id="showList2">
<ul class="list-group2">
</ul>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.12.4-jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#txtCountry').keyup(function(){
$('#showList').show();
var search=$('#txtCountry').val();
if(search !=='' && search !==null)
{
$.ajax({
type:'POST',
url:'record.jsp',
data:'key='+search,
success:function(data)
{
$('#showList').html(data);
}
});
}
else
{
$('#showList').html('');
}
$(document).on('click','li',function(){
$('#txtCountry').val($(this).text());
$('#showList').hide();
});
});
$('#txtCountry2').keyup(function(){
$('#showList2').show();
var search=$('#txtCountry2').val();
if(search !=='' && search !==null)
{
$.ajax({
type:'POST',
url:'record.jsp',
data:'key='+search,
success:function(data)
{
$('#showList2').html(data);
}
});
}
else
{
$('#showList2').html('');
}
$(document).on('click','li',function(){
$('#txtCountry2').val($(this).text());
$('#showList2').hide();
});
});
});
</script>
record.jsp
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%
if(request.getParameter("key")!=null) //get "key" variable from jquery & ajax part this line "data:'key='+search" and check not null
{
String key=request.getParameter("key"); //get "key" variable store in created new "key" variable
String wild="%" +key+ "%"; //remove "%" for use preparedstatement in query name like, and "key" variable store in "wild" variable for further use
Connection conn;
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/For_deces?useSSL=false","root","root");
try
{
PreparedStatement pstmt=null; //create statement
pstmt=conn.prepareStatement("SELECT DISTINCT Lib_Wilaya FROM code_geographique WHERE Lib_Wilaya like ? "); //sql select query
pstmt.setString(1,wild); //above created "wild" variable set in this
ResultSet rs=pstmt.executeQuery(); //execute query and set in ResultSet object "rs".
while(rs.next())
{
%>
<li class="list-group-item"><%=rs.getString("Lib_Wilaya")%></li>
<%
}
conn.close(); //close connection
}
catch(Exception e)
{
e.printStackTrace();
}
}
%>
