I want to make an autocomplete but not by using any java method. Just by using jsp, jquery, ajax and scriplets. Is it possible? Please suggest.
I tried using the code given below, but am getting error
Uncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method 'List.jsp'
The code is given below:
//(Index.jsp)
<html>
<head>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#country').focusin(function() {
$("#country").autocomplete("List.jsp");
});
});
</script>
</head>
<body>
<br><br><center>
<font face="verdana" size="2">
<font size="4">Java(jsp)/jQuery Autocompleter Example</font>
<br><br><br><br>
Select Country :
<input type="text" id="country" name="country"/>
</font>
</body>
</html>
//(List.jsp)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%
try {
String s[] = null;
Class.forName("com.mysql.jdbc.Driver");
System.out.println("Driver found");
String url = "jdbc:mysql://localhost:protNum/dbName";
String user = "";
String pass = "";
System.out.println("Connected....");
Connection con = (Connection) DriverManager.getConnection(url, user, pass);
Statement st = con.createStatement();
ResultSet rs = st.executeQuery("select * from tbctry");
List li = new ArrayList();
while (rs.next()) {
li.add(rs.getString(1));
}
String[] str = new String[li.size()];
Iterator it = li.iterator();
int i = 0;
while (it.hasNext()) {
String p = (String) it.next();
str[i] = p;
i++;
}
//jQuery related start
String query = (String) request.getParameter("q");
int cnt = 1;
for (int j = 0; j < str.length; j++) {
if (str[j].toUpperCase().startsWith(query.toUpperCase())) {
out.print(str[j] + "\n");
if (cnt >= 5)// 5=How many results have to show while we are typing(auto suggestions)
{
break;
}
cnt++;
}
}
//jQuery related end
rs.close();
st.close();
con.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
I want the textbox to autopopulate values from database on keydown. I have done this using spring MVC, but I'm not getting any clue how to do this without using any java class but by just using jsp, jquery, ajax, and scriplets. Please help!
You can do that by using jquery onkeyup event ,when user start typing in input box the typed value will passed to your jquery function and by using ajax you can call your List.jsp page and get that value using request.getParameter("") ,lastly passed that value in your query and return result back using out.print like below :
Input i.e :where value will be typed :
Select Country : <input type="text" id="country" name="country"/>
//here result will be display
<div id="result"></div>
Jquery & Ajax :
<script>
$('#country').keyup(function(){
//getting typed value
var searchid=$(this).val();
if(searchid!='')
{
$.ajax({
type:"POST",
url:"List.jsp",
//passing value
data:{search:searchid},
success:function(html){
//response from List.jsp page will come here
$('#result').html(html);
}
});
}
});
</script>
List.jsp page :
//getting value passed from ajax
String search = (String) request.getParameter("search");
//db setting
try{
Class.forName("com.mysql.jdbc.Driver");
System.out.println("Driver found");
String url = "jdbc:mysql://localhost:protNum/dbName";
String user = "";
String pass = "";
System.out.println("Connected....");
Connection con = (Connection) DriverManager.getConnection(url, user, pass);
//below columnanme is fieldname from where you need to compare your search value.
PreparedStatement pstmt = con.prepareStatement(
"select * from tbctry where columnname LIKE ?");
pstmt.setString(1, search + "%");
ResultSet rs=pstmt.executeQuery();
while(rs.next()){
//here you need to print values which you need to show in div
out.print("something");
}
rs.close();
pstmt.close();
con.close();
} catch (Exception e) {
e.printStackTrace();
}
Hope this helps !