Peek-a-boo search!
Peek-a-Boo Search
So, as a result of a design oversight, the peek-a-boo search is born, well, at least born in my world. During development of a recent site, we noticed that the design didn't have a submit button on the global search. Hmm... After a few minutes of brainstorming, the idea to show and hide the submit button won out. Here's how it works:
You have a simple search form in the HTML.
<form method="post" action="#" id="search17" name="search">
<label for="search-box">Search</label>
<input type="text" value="Search" name="search-box" id="search-box" />
<input type="image" alt="Go!" src="/site_images/header_search_go.png" id="submit" name="submit" />
</form>
Some simple javascript that requires jQuery.
$('#search17 #submit').hide();
$('#search-box').focus(function() {
if($('#search-box').val()=='Search'){
$('#search-box').val('');
};
$('#search17 #submit').show();
});
$('#search-box').blur(function() {
if($('#search-box').val()== ''){
$('#search-box').val('Search');
};
$('#search17 #submit').hide();
});
And that's it! Be sure to include jQuery and the javascript snippet above in your <HEAD> tag and problem solved.
Demo
Filed under jQuery
