Hi there guys! We continue writting tutorials to try to improve our website’s interface. Search boxes are in the air and in our days they become a very important part of our websites, so it will be interesting if we can do them a little better.

This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

As always I show you a preview image linking the final result:

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

Let’s learn guys!

Step 1: What are we going to do?

We are going to learn how to improve our search boxes by adding these classic (but useful) features:

• Autofocus when the page is loaded.
• Highlighting on focus event.
• Autoreplace default text, if someone clicks the search box default text will disappear (and appear on blur if needed!).

We will represent all these features in two search boxes by using javascript, specifically the jQuery javascript library.

Let’s go guys!

Step 2: The Layout

We don’t need to do something complex for this tutorial, so we will make a simple and clean layout to go fast to the interesting part (the javascript interaction).

Here you have the layout:

[code language="html"]



	
	
	


	
	

		
Autofocus when DOM is ready
		
	
	

		
Show / Hide default text if needed
		
	
	
	


[/code]

As I told you we have 2 different search boxes:

• searchBox1: It will have the autofocus.
• searchBox2: It will have the autoreplace default text functionality.

Both search boxes will have the highlighting functionality in the focus (and blur) event.

Let’s move to the CSS part guys.

Step 3: Adding a little style

As always we will make use of our reset CSS part and we will add a little style to our layout with this code:

[code language="css"]
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
	background: #fff;
	line-height:14px;
	font-size: 12px;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	margin:0pt;
	cursor:default;
	overflow: hidden;
}
html,body{
	height:100%;
	text-align: center;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
a{
	text-decoration: none;
}
strong{
	font-weight: 700;
}
/******* GENERAL RESET *******/
h1{
	font-weight: 700;
	font-size: 18px;
	line-height: 2em;
}
/******* LOGO *******/
#logo{
	margin-top: 1em;
	display: block;
}
/******* /LOGO  *******/
/******* FORM *******/
.form{
	margin: 5em auto 3em;
	width: 300px;
}
.form table{
	margin-bottom: 2em;
}
.form table td{
	text-align: left;
	font-size: 11px;
	vertical-align: top;
}
.form input{
	border: 1px solid #d0ccc9;
	background: #fff;
	color: #5f95ef;
	font-size: 11px;
	font-weight: 700;
	padding-bottom: 2px;
}
.form input.text{
	font-weight: normal;
	color: #565656;
	border: 1px solid #9c9c9c;
	width: 250px;
	padding: 2px;
	margin-bottom: 5px;
	text-align: left;
}
.form input.text.active{
	background: #ddeff6;
	border: 1px solid #0099d4;
}
/******* /FORM *******/
[/code]

Nothing special, just a little comment:

As you can see we are defining a CSS class named .active, it will be used in the javascript code to highlight our search boxes by using addClass() function of jQuery.

So now we have completed the layout and his style, let’s go to the javascript part.

Step 4: Adding the functionality with jQuery

It’s almost done, we only need to add the functionality to our search boxes searchBox1 and searchBox2 by controlling events like: ready, focus and blur.

Remember that all the following code will be in the $(document).ready event.

First of all we are going to save references to some elements in variables:

[code language="javascript"]
//global vars
var searchBoxes = $(".text");
var searchBox1 = $("#search1");
var searchBox2 = $("#search2");
var searchBox2Default = "Search the web...";
[/code]

Now that we have references saved and set up our default text for the searchBox2 (to the autoreplace functionality, remember?) let’s see how to highlight our search boxes by controlling focus and blur events:

[code language="javascript"]
//Effects for both searchbox
searchBoxes.focus(function(e){
	$(this).addClass("active");
});
searchBoxes.blur(function(e){
	$(this).removeClass("active");
});
[/code]

We didn’t make anything special just add or remove the .active CSS class in the focus or blur event respectivily to highlight both search boxes.

To add the autofocus functionality to our search box searchBox1 we only need to make a call to the focus() function when the DOM is ready (in the $(document).ready you know):

[code language="javascript"]
//Searchbox1, set focus when document is ready
searchBox1.focus();
[/code]

Simple right? So let’s take a look to the remain autoreplace default text functionality:

• Default text will be hidden only in the focus event if the current text in the input is exactle the default text.
• We will set the default text in the blur event if the current text in the input is null.

So here we have the code:

[code language="javascript"]
//Searchbox2 show/hide default text if needed
searchBox2.focus(function(){
	if($(this).attr("value") == searchBox2Default) $(this).attr("value", "");
});
searchBox2.blur(function(){
	if($(this).attr("value") == "") $(this).attr("value", searchBox2Default);
});
[/code]

Allright guys, nothing more to show you here! Congratulations for finishin the tutorial

Step 5: Testing our Search Boxes

That’s all guys, I hope you find it useful and use this tutorial to improve a little more your websites.

You can try the tutorial online here to see how It is working and download here all sources.

One more thing guys! We are near to release the new open beta of Plusmusica.com and we need a few more testers if you can help us post a comment or just send us an e-mail to send you an private invitation.

Remember that you can solve your doubts in our forums and follow os on Twitter to know more about what are we doing in any moment!

See you on next tutorial and remember that we want you suggest tutorials to write!

One more thing…

We guarantee you that you will pass 70-642 exam on time because we have complete collection of 220-701 exam dumps as well as 640-822 questions to provide you in detail knowledge required to pass IT exams.

webhosting