Improving Search Boxes with jQuery
January 7th, 2009
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>yensdesign.com - Create a shoutbox using PHP and AJAX with jQuery</title> <link rel="stylesheet" href="css/general.css" type="text/css" media="screen" /> </head> <body> <a id="logo" title="Go to yensdesign.com!" href="http://www.yensdesign.com"><img src="css/images/logo.jpg" alt="yensdesign.com" /></a> <form method="post" class="form" id="form1"> <h1>Autofocus when DOM is ready</h1> <table> <tr> <td><input class="text" id="search1" type="text" value="Search the web..." /></td> <td><input id="send1" type="submit" value="Search it!" /></td> </tr> </table> </form> <form method="post" class="form" id="form1"> <h1>Show / Hide default text if needed</h1> <table> <tr> <td><input class="text" id="search2" type="text" value="Search the web..." /></td> <td><input id="send2" type="submit" value="Search it!" /></td> </tr> </table> </form> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="searchbox.js"></script> </body> </html>
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:
@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 *******/
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:
//global vars
var searchBoxes = $(".text");
var searchBox1 = $("#search1");
var searchBox2 = $("#search2");
var searchBox2Default = "Search the web...";
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:
//Effects for both searchbox
searchBoxes.focus(function(e){
$(this).addClass("active");
});
searchBoxes.blur(function(e){
$(this).removeClass("active");
});
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):
//Searchbox1, set focus when document is ready searchBox1.focus();
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:
//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);
});
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!
interface, jquery, search, search boxes, searchbox, Tutorials
Coding, Tutorials, Web Design
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
Thanks! Simple, yet good stuff. Note that for the active styles you could also use the :focus pseudo-class in CSS, which won’t work in IE though.
@Geert Thanks for posting! I kewn about that but as you said IE ruin our plans hehe… thanks for the comment indeed!
By the way Cool website for idoe studios
Are you the creators of Kohana PHP? It looks great 
Thank you for this tutorial ! Keep it up.
Improving Search Boxes with jQuery…
[...]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.[...]…
Tutorial added
http://www.tutorialand.com
[...] Improving Search Boxes with jQuery [...]
i’d like to betatest plusmusica if possible!
Site looks really nice so far.
John
@John Here you have
Humm thanks for this one. I learned this “var searchBoxes = $(”.text”);” using a variable to store a element/elements and then use it. And learned how to do add/remove the default text on focus/blur.
Btw same ID for both forms
And humbly i guess we could have done this without the extra table markups, no?
[...] 29. Improving Search Boxes with jQuery [...]
The style of writing is very familiar to me. Did you write guest posts for other bloggers?
[...] adding some form effects and validations referred from these links…. http://yensdesign.com/2009/01/improving-search-boxes-with-jquery/ http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/ the complete code [...]
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 4:20 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]