Autocomplete Textbox in JSP

Autocomplete plugin for jQuery can be used to provides list of suggestions, as we type letter/s in our textbox.

Last few days I was breaking my head for auto complete textbox in JSP with autocomplete (v1.3) jQuery plugin.  I had tried all the way, but I was not getting the list on the textbox. Even I posted the problem in DaniWeb, discussion community, but there also I didn’t get any solution.

Later after long try I found the solution. Actually autocomplete v1.1 works with JSP very well, but earlier is not working with JSP.  With v1.1, I got output in this way.

For the given example, I have created a JSP file which will contain a list of country name. If you want to create the list with the data of the database, you will need to select the data from the database and print the data in JSP page with new line after each data.

//list.jsp
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%
	String countries[] = {
						 	"Afghanistan",
							"Albania",
							"Algeria",
							"Andorra",
							"Angola",
							"Antigua and Barbuda",
							"Argentina",
							"Armenia",
							.
							.
							"Yemen",
							"Zambia",
							"Zimbabwe"
							};

	String query = (String)request.getParameter("q");
	//System.out.println("1"+request.getParameterNames().nextElement());
	response.setHeader("Content-Type", "text/html");
	int cnt=1;
	for(int i=0;i<countries.length;i++)
	{
		if(countries[i].toUpperCase().startsWith(query.toUpperCase()))
		{
			out.print(countries[i]+"\n");
			if(cnt>=10)
				break;
			cnt++;
		}
	}
%>

Then we have a JSP or HTML page which will request to the server side page autocomplete function of autocomplete plugin.

//index.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
	<script src="JS/jquery.autocomplete.js"></script>
</head>
<body>
	<div style="width: 300px; margin: 50px auto;">
		<b>Country</b>   : <input type="text" id="country" name="country" class="input_text"/>
	</div>

</body>
<script>
	jQuery(function(){
		$("#country").autocomplete("list.jsp");
	});
</script>
</html>

I have used the following styles to make it suitable for my site. You can modify according to your requirements.

.ac_results {
 padding: 0px;
 border: 1px solid #ff7c08;
 background-color: white;
 overflow: hidden;
}

.ac_results ul {
 width: 100%;
 list-style-position: outside;
 list-style: none;
 padding: 0;
 margin: 0;
}

.ac_results li {
 margin: 0px;
 padding: 2px 5px;
 cursor: default;
 display: block;
 color: #972800;
 font-family:Arial, Helvetica, sans-serif;
 /*
 if width will be 100% horizontal scrollbar will apear
 when scroll mode will be used
 */
 /*width: 100%;*/
 font-size: 12px;
 /*
 it is very important, if line-height not setted or setted
 in relative units scroll will be broken in firefox
 */
 line-height: 16px;
 overflow: hidden;

}

.ac_loading {
 background: white url(../images/indicator.gif) right center no-repeat;
}

.ac_odd {
 background-color: #fef2d8;
}

.ac_over {
 background-color: #febb80;
 color: white;
}

.input_text{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 border:1px solid #FF7C08;
 padding:2px;
 width:150px;
 color:#802900;
 background:white url(../images/search.png) no-repeat 3px 2px;
 padding-left:17px;
}

Demo can be viewed here.

Source files are available here.

Some extra features could be possible from earlier version of autocomplete, So if anyone find the solution in newer vision, please do comment me.

Ajax Login Validation for JSP

Here i have tried to build a small Ajax validation example, which will check the login validation using Ajax concept of jQuery.

In this example,

login page consist of the User id and password field. On submit, jQuery will send the control to the JSP page(check.jsp) using ajax.

<!--index.jsp-->
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<!-- ..//JQuery Source\\.. -->
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<!-- ..//JavaScript Code for this page\\.. -->
<script type="text/javascript">
$(document).ready(function(){
$("#login_frm").submit(function(){

//remove previous class and add new "myinfo" class
$("#msgbox").removeClass().addClass('myinfo').text('Validating Your Login ').fadeIn(1000);

this.timer = setTimeout(function () {
$.ajax({
url: 'check.jsp',
data: 'un='+ $('#login_id').val() +'&pw=' + $('#password').val(),
type: 'post',
success: function(msg){
if(msg != 'ERROR') // Message Sent, check and redirect
{                // and direct to the success page

$("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
function()
{
//redirect to secure page
document.location='login.jsp?user='+msg;
});

}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Sorry, Wrong Combination Of Username And Password.').removeClass().addClass('myerror').fadeTo(900,1);
});

}
}

});
}, 200);
return false;
});

});

</script>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Form</title>
</head>
<body>

<form name="login_frm" id="login_frm" action="" method="post">
<div id="login_box">
<div id="login_header">
Login
</div>
<div id="form_val">
<div>User Id :</div>
<div><input type="text" name="login_id" id="login_id"/><span style="font-size: 10px;">hint : admin</span></div>

<div>Password:</div>
<div><input type="password" name="password" id="password"/><span style="font-size: 10px;">hint : test</span></div>
<div style="clear:both;height:0px;"></div>

<div id="msgbox"></div>
</div>
<div id="login_footer">
<label>
<input type="submit" name="login" id="login" value="Login" />
</label>
</div>
</div>
</form>

</body>
</html>

check.jsp will check the login and return an id if the login is valid or it will send ERROR.

<pre><!--check.jsp-->
</pre>
<%
String user=request.getParameter("un");
String pass=request.getParameter("pw");
int user_id=12;
if(user.equalsIgnoreCase("admin") &&
pass.equals("test") )
{
out.print(user_id);
}
else
{
out.print("ERROR");
}
%>

I am sending ID, because using JavaScript I am redirecting the page to the login page where the session for the login will be created. id will not be visible in the source, so that only valid user can redirected to login.jsp

<!--login.jsp-->

<%@page session="true"%>
<%
String user=request.getParameter("user");
session.setMaxInactiveInterval(24 * 60 * 60);
session.setAttribute("user",user);
response.sendRedirect("success.jsp");
%>

On success.jsp page one can sign out, where the session will get clear.

<!--success.jsp-->

<%@page session="true"%>
<%
if(session.getAttribute("user")==null)
{
response.sendRedirect("index.jsp");
}
%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Success</title>
</head>
<body>
<center>
<h1>You are successfully logged in</h1>
<h3><a href="logout.jsp">Logout</a></h3>
</center>
</body>
</html>

<!--logout.jsp-->

<%@page import = "java.util.Date" session="true"%>
<%

session.setAttribute("user", null);
session.invalidate();
response.sendRedirect("index.jsp");
%>

Demo Of the projectis here

Download source files for project here

jQuery Ajax Tab for JSP

Today I was working with a jQuery Ajax tab for JSP. First I searched a list of tabs, in order to implement it as JSP,AJAX. Among all I found the tab provided by jetlogs to be easy to convert for JSP.  Look was not so attractive, but I changed according to my requirement.


Demo for the tab can be view here
You can download the source file here

Form Validation with jquery-plugin-validation

I was trying to apply JQuery for HTML form validation. I googled different plug-in but jquery-plugin-validation impressed me more. But to fulfill my requirement, I did some updating so that the errors can be displayed on the top of the form, as shown below

After making some small changes I got it. If you also want similar kind of validation style, you can download sample files from here.

Some updates on facebox (lightbox)

While working with my project, I was browsing for a JQuery plugin for, dialog box. From the list of all plugin, I found facebox to be very much useful for my project. After altering some css and design I made it according to my requirement, which looks like this:

If you want same kind of dialogue box (lightbox), you may download the sample from here.