Everyone is fascinated about auto-complete. Right? I think, Are you? Drop in the comment below. Long time I've been connecting JQuery and Java and have some of the posts like loading JSP file in JQuery in one line Now, it is time to go further.
I would be blogging now a simple example on how to connect auto-complete for a HTML text field to a JSP file with JQuery in one line! Yes, in five lines!, YOU heard it RIGHT!
Project structure
Folder path: C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\jq_autocomplete
jq_autocompletePhoto Credit: Angelina :) via Compfight cc
|
+-- index.html
+-- auto.jsp
index.html - HTML file
<html>
<head>
<title>Send POST Request to Servlet with JQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
// When any key is down
$(document).keydown(function(){
// Get the input element and its value
var i=$("#com");
var val=i.val();
// Send request only if user types alphabet
// because auto.jsp returns names of companies
// which contains only alphabets
if(val.match(/^[A-z]+$/))
{
// Send request and get the data
$.get("auto.jsp?com="+val,function(data){
// Get each item separated by new line
var items=data.split("\n");
// put those items in autocomplete! That's it!
i.autocomplete({source:items});
});
}
});
</script>
</head>
<body>
<input type="text" id="com" name="com"/>
</body>
</html>
The point here is that the function keydown is executed every time when a key is down in the document and so the request will be sent each time when the key is down degrading performance of the application. To avoid this, the if-condition is useful which checks if the value matches the regex which corresponds to any alphabet.auto.jsp - Returns auto complete data
<%@page import="java.util.*"%>
<%
// Create ArrayList and add some items
ArrayList<String> as=new ArrayList<String>();
as.add("Google");
as.add("Yahoo");
as.add("Apple");
as.add("Microsoft");
as.add("Linkedin");
as.add("Facebook");
as.add("IBM");
as.add("Oracle");
as.add("Salesforce");
as.add("Amazon");
String s=request.getParameter("com");
for(String st:as)
{
if(st.toLowerCase().startsWith(s.toLowerCase()))
{
out.println(st);
}
}
%>
The best price you could pay for this post is sharing it. I thank you in advance :)