Jul 16, 2010

Improve searchbox (autofocus,blur,default text)

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:
   1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
   2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">   
   3. <head>   
   4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
   5.   <title>yensdesign.com - Create a shoutbox using PHP and AJAX with jQuery</title>   
   6.   <link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />   
   7. </head>   
   8. <body>   
   9.   <a id="logo" title="Go to yensdesign.com!" href="http://www.yensdesign.com"><img src="css/images/logo.jpg" alt="yensdesign.com" /></a>   
  10.   <form method="post" class="form" id="form1">   
  11.     <h1>Autofocus when DOM is ready</h1>   
  12.     <table>   
  13.       <tr>   
  14.         <td><input class="text" id="search1" type="text" value="Search the web..." /></td>   
  15.         <td><input id="send1" type="submit" value="Search it!" /></td>   
  16.       </tr>   
  17.     </table>   
  18.   </form>   
  19.   <form method="post" class="form" id="form1">   
  20.     <h1>Show / Hide default text if needed</h1>   
  21.     <table>   
  22.       <tr>   
  23.         <td><input class="text" id="search2" type="text" value="Search the web..." /></td>   
  24.         <td><input id="send2" type="submit" value="Search it!" /></td>   
  25.       </tr>   
  26.     </table>   
  27.   </form>   
  28.   <script type="text/javascript" src="jquery.js"></script>   
  29.   <script type="text/javascript" src="searchbox.js"></script>   
  30. </body>   
  31. </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:

   1. @CHARSET "UTF-8";   
   2. /******* GENERAL RESET *******/   
   3. 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,   
   4. 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,   
   5. tfoot, thead, tr, th, td {   
   6. border:0pt none;   
   7. font-family:inherit;   
   8. font-size: 100%;   
   9. font-style:inherit;   
  10. font-weight:inherit;   
  11. margin:0pt;   
  12. padding:0pt;   
  13. vertical-align:baseline;   
  14. }   
  15. body{   
  16.   background: #fff;   
  17.   line-height:14px;   
  18.   font-size: 12px;   
  19.   font-family: Arial, Verdana, Helvetica, sans-serif;   
  20.   margin:0pt;   
  21.   cursor:default;   
  22.   overflow: hidden;   
  23. }   
  24. html,body{   
  25.   height:100%;   
  26.   text-align: center;   
  27. }   
  28. .clear{   
  29.   clear: both;   
  30.   height: 0;   
  31.   visibility: hidden;   
  32.   display: block;   
  33. }   
  34. a{   
  35.   text-decoration: none;   
  36. }   
  37. strong{   
  38.   font-weight: 700;   
  39. }   
  40. /******* GENERAL RESET *******/   
  41. h1{   
  42.   font-weight: 700;   
  43.   font-size: 18px;   
  44.   line-height: 2em;   
  45. }   
  46. /******* LOGO *******/   
  47. #logo{   
  48.   margin-top: 1em;   
  49.   display: block;   
  50. }   
  51. /******* /LOGO *******/   
  52. /******* FORM *******/   
  53. .form{   
  54.   margin: 5em auto 3em;   
  55.   width: 300px;   
  56. }   
  57. .form table{   
  58.   margin-bottom: 2em;   
  59. }   
  60. .form table td{   
  61.   text-align: left;   
  62.   font-size: 11px;   
  63.   vertical-align: top;   
  64. }   
  65. .form input{   
  66.   border: 1px solid #d0ccc9;   
  67.   background: #fff;   
  68.   color: #5f95ef;   
  69.   font-size: 11px;   
  70.   font-weight: 700;   
  71.   padding-bottom: 2px;   
  72. }   
  73. .form input.text{   
  74.   font-weight: normal;   
  75.   color: #565656;   
  76.   border: 1px solid #9c9c9c;   
  77.   width: 250px;   
  78.   padding: 2px;   
  79.   margin-bottom: 5px;   
  80.   text-align: left;   
  81. }   
  82. .form input.text.active{   
  83.   background: #ddeff6;   
  84.   border: 1px solid #0099d4;   
  85. }   
  86. /******* /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:

   1. //global vars   
   2. var searchBoxes = $(".text");   
   3. var searchBox1 = $("#search1");   
   4. var searchBox2 = $("#search2");   
   5. 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:

   1. //Effects for both searchbox   
   2. searchBoxes.focus(function(e){   
   3.   $(this).addClass("active");   
   4. });   
   5. searchBoxes.blur(function(e){   
   6.   $(this).removeClass("active");   
   7. });
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):

   1. //Searchbox1, set focus when document is ready   
   2. 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:

   1. //Searchbox2 show/hide default text if needed   
   2. searchBox2.focus(function(){   
   3.   if($(this).attr("value") == searchBox2Default) $(this).attr("value", "");   
   4. });   
   5. searchBox2.blur(function(){   
   6.   if($(this).attr("value") == "") $(this).attr("value", searchBox2Default);   
   7. });

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

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!


Copy from http://yensdesign.com/
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)