jQuery Dropdown Search Panel

Categorized in Programming, Tutorials, jQuery on May 11th, 2009

For one of my projects recently I was playing about with search boxes and came up with a cool drop down search panel. So I thought I would share with you how I made the panel using some jQuery and CSS sprites.

jQuery Dropdown Search Panel

View Demo Download Source

Preparation

Things you will need to make this search panel:

Download jQuery v1.3 so we can animate things.
Images for the background of your search box and the toggle button.

In this case we will be using a CSS Sprite for our toggle button. It is good practice to use CSS sprites when making buttons that use images as it helps improve your site performance.

The HTML

So lets get to it. The HTML here is pretty simple. The main thing to notice here is our top-search div which just has a link and a normal search form in it. This keeps things valid and accessible.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Dropdown Search Panel</title>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
//Javascript will go here...
</script>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div id="top-search">
			<a href="#" id="searchtoggle" title="Want to search?">Search</a>
			<form method="post" action="">
			<input type="text" class="box" value="Search..." name="s" id="s" />
			<button class="btn" title="Submit Search">Search</button>
			</form>
		</div>
                <h1>jQuery Dropdown Search Panel</h1>
	</div>
</div>
 
</body>
</html>

The CSS

The CSS here is pretty simple as well with a few exceptions.

#header {
	width:900px;
	height:100px;
	margin:0 auto;
	position:relative;
}
 
#searchtoggle {
	background:url(../images/toggle.png) no-repeat left top;
	position:absolute;
	top:0px;
	right:0px;
	width:21px;
	height:19px;
	text-indent:-9999px;
	border:0;
}
#searchtoggle.up { 
	background:url(../images/toggle.png) no-repeat right top; 
}
#top-search {
	height:60px;
	width:325px;
	float:right;
	position:relative;
}
#top-search form {
	position:absolute;
	top:0px;
	left:0px;
	background:url(../images/search_top.png) no-repeat;
	width:262px;
	height:30px;
	padding:5px 0 0 40px;
	display:none;
}
#top-search .box {
	width:195px;
	background:transparent;
	border:0;
	margin-left:5px;
}
#top-search .btn {
	margin-left:10px;
	width:35px;
	background:transparent;
	border:0;
	text-indent:-9999px;
	cursor:pointer;
}

So here we are applying our styles to our header and top-search div. Most of this is standard CSS but a few things to notice are:

The #header div has position relative so we can absolute position our #searchtoggle link.
The searchtoggle link uses a CSS sprite. Notice how initially the background image is positioned “left top” (i.e. pointing down). We then set another class, #searchtoggle.up, to override this position to “right top” (i.e. pointing up). You will see how this works in the javascript later.
You will also notice the line “text-indent:-9999px;” in certain places. This is a trick to hide the default text when CSS is applied (e.g. when you are using a background image and don’t need text) but it will keep the page accessible for people have CSS turned off and screen readers.
The “#top-search form” has the display value of “none” so the search form is initially hidden.

The Javascript

Finally we reach the part where it all gets pulled together and we harness the power of jQuery. This javascript can go in the HTML script tags we prepared earlier or, a better practice, is to put it in it’s own JS file and include it.

$(document).ready(function(){	
	$('#searchtoggle').click(function () {
		$('#top-search form').slideToggle(300, function(){
			$('#searchtoggle').toggleClass('up');
		});
        });
 
	$('#top-search .box').focus(function () {
		if($(this).val() == 'Search...') $(this).val('');
        });
	$('#top-search .box').blur(function () {
		if($(this).val() == '') $(this).val('Search...');
        });
});

This first part here is where we use jQuery’s default slideToggle function to slide the “#top-search form” up and down when we click the #searchtoggle link. We also use the callback functionality to toggle the CSS class up on the #searchtoggle link. As we mentioned above this is how we use CSS to switch which way the arrows are pointing.

The second part of the jQuery here is simply to clear and populate the search box with default text if it is empty. This part is not required.

Conclusion

So there we have our jQuery Dropdown Search Panel. Feel free to use this code wherever you want in your projects. I hope you can see how some relatively simple jQuery and CSS can produce some cool results and add that extra punch to your websites. If you have any comments or constructive criticisms please let me hear them in the comments below.

View Demo Download Source

Update

14th May 2009 – I’ve updated the CSS and HTML code to fix the bug that seemed to be happening in Chrome and Safari when you toggled the search panel on subsequent occasions the search box would move to the right.

jQuery Dropdown Search Panel

25 Comments

Sean O 9 months ago

Nice effect. Looks good in Firefox 3, but in Chrome, the dropdown seems to bounce around on subsequent pulldowns, even opening to the right of the toggle button (offscreen). Have you seen this?
gilbitron 9 months ago

Hi Sean O. Thanks for pointing that out. Hadn’t noticed that. I will have a look at it.
bobby s 9 months ago

safari 3.2.1 on the mac does the same
Keith D 9 months ago

Thanks

I’ve been looking for a search function… this looks good.

Keith D
gilbitron 9 months ago

@Sean O, @bobby s I’ve posted an update for the code. Thanks for the heads up.
Fred 8 months, 3 weeks ago

Pretty, however, violates usability principles. If I’m your standard user I will never make the connection between your sprite and searching.
sayan mukherjee 5 months, 3 weeks ago

great realease and thanks for sharing.
Alan Anderson 5 months, 2 weeks ago

Great wee idea here, thanks for releasing and sharing, was speaking to a guy this morning about it and passed on your site details as it was something he was looking for a site he is developing at the moment
gilbitron 5 months, 2 weeks ago

@sayan @Alan Thanks guys. Glad I could help.
Patrick 5 months ago

Not sure about Fred’s comments up there… it’s nice looking work!
Keith D 4 months, 4 weeks ago

Just taking another look at this tutorial…. does the search box function without any php coding or am I missing something?

Hope it does because I can cope with html, CSS and a little javascript.
Gilbert 4 months, 4 weeks ago

Hi Keith. I’m afraid the search box itself requires PHP to work. This tutorial only covers how to display the search box and not how the search functionality actually works.
Keith Davis 4 months, 4 weeks ago

Thanks for reply Gilbert – PHP is a bit beyond me.
Still a useful tutorial and I’ll take a look round the rest of your site.
wroxbox 2 months, 3 weeks ago

[jquery] jQuery Dropdown Search Panel | Gilbert Pellegrom: Remember to me: Details in top right corner http://bit.ly/1U3byw

This comment was originally posted on Twitter
wroxbox 2 months, 3 weeks ago

[css] jQuery Dropdown Search Panel | Gilbert Pellegrom: Remember to me: Details in top right corner http://bit.ly/1U3byw

This comment was originally posted on Twitter
selva comments 1 month ago

Thanks for the post got to learn this in easy way
mika 3 weeks, 4 days ago

“Pretty, however, violates usability principles. If I’m your standard user I will never make the connection between your sprite and searching.”
That is where your imagination has to come in Fred: Replace the icon with a “search” image or anything else…