Animated Search Box with HTML5 Placeholder
April 16th, 2012 by Kyle J. Larson
Search is one of the most important functions on large websites. Search engines like Google have made vast improvements in search and as a result many users quickly look toward search as a means of navigation. This tutorial shows how you can make an animated search box with the HTML5 placeholder element to show users all the different types of searches they can run on your site.
The HTML 5 Placeholder
HTML 5 introduced a number of new options we can use when building forms. The placeholder allows us to add ‘hint’ text to the background of an input or textarea that disappears when the user begins typing in the field. This is a great new addition, as the only way to do this previously was with javascript.
As with many new HTML features there are some browser support issues. This will work in all modern versions of Chrome, Safari, Opera, and Firefox. If you are using Internet Explorer this will only work starting in version 10, so we’ll need to add a fallback for those users.
Creating the HTML5 Search Box
To start off we’ll create a form field and add a placeholder to it. I’ve also added some CSS to make it look nice (to fix alignment bugs in IE you may need to place the two inputs on the same line of code):
<style>
#navBar {
background: url(bg_navBar.jpg) repeat-x;
height: 44px;
}
#searchBox {
background: #1f1f1f;
border: 1px solid #606060;
border-radius: 5px;
box-shadow: 0 0 4px #000000 inset;
color: #fff;
font-size: 13px;
margin: 6px;
padding: 5px 25px 5px 4px;
width: 172px;
}
#searchButton {
position: absolute;
margin: 12px 0 0 -26px;
}
</style>
<div id="navBar">
<input id="searchBox" type="text" placeholder="Search Our Site">
<input id="searchButton" type="image" src="icon_searchMag.png">
</div>
Animating the HTML Placeholder
Next step we’ll add in jQuery and write a script to make an animated search box by changing the content of the placeholder:
...
<div id="navBar">
<input id="searchBox" type="text" placeholder="Search Our Site">
<input id="searchButton" type="image" src="icon_searchMag.png">
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function changePlaceholder() {
// create our list of different placeholders we'll use
var placeHolders = new Array(),
placeHolders[0] = "Search for Toys";
placeHolders[1] = "Search for Video Games";
placeHolders[2] = "Search for DVDs";
// x will be our counter for what placeholder we're currently showing
var x = 0;
// change the placeholder to the current number of our counter
$('#searchBox').attr('placeholder', placeHolders[x]);
// increase the counter
x++;
// if we've hit the last placeholder then start over
if(x >= placeHolders.length) {
x = 0;
}
// run this function again in 3 seconds to keep the loop going
setTimeout('changePlaceholder()', 3000);
}
// start running the changePlaceholder function after 3 seconds
t = setTimeout('changePlaceholder()', 3000);
</script>
Fix for IE
Now we have a working animated placeholder in most browsers, but it still doesn’t show anything in IE 9 or below. For these older browsers we’ll just make a static placeholder. There are a number of jQuery scripts out there that solve this issue. I found Mathias Bynens’ solution to work perfect for this. Just download the script, link to it in your code, and add the function to run it in your script:
<script type="text/javascript" src="jquery.placeholder.min.js"></script>
<script>
$(function() {
$('input, textarea').placeholder();
});
</script>
Great, now we’re just about done with the animated search box but we have an issue… when the changePlaceholder function runs it breaks the fix! To solve this we’ll put in a conditional comment to keep the loop from running on IE. Just add this after your /script tag:
<!--[if lte IE 9 ]>
<script>
clearTimeout(t);
</script>
<![endif]-->
Demo
You can view the working version above or download the demo and files in a zip.