Search Type Options with MooTools

Advanced search engines like Google, Yahoo!, and Bing have discovered the obvious: one type of search isn't good enough. The big search engines offer web search, video search, code search, blog search, image search, and any other type of search you can think of. Of course they could use different search boxes on different pages but that's annoying. Using a bit of JavaScript we can consolidate all of our search types into one box.

The HTML / PHP

<p>Click on the search type headers above the search box to change the type of search you'd like to make!'</p>
<p>&nbsp;</p>
<div id="search-container" style="width:500px">
	<div id="search-options">
		<a href="?type=web" <?php if($_GET['type'] != 'video' && $_GET['type'] != 'image') { echo 'class="web active"'; } ?> style="left:20px;">Web</a>
		<a href="?type=image" <?php if($_GET['type'] == 'image') { echo 'class="image active"'; } ?> style="left:70px;">Image</a>
		<a href="?type=video" <?php if($_GET['type'] == 'video') { echo 'class="video active"'; } ?> style="left:140px;">Video</a>
	</div>
	<form method="get" action="/search/web" id="search-form">
		<input type="text" id="query" name="query" />
		<input type="submit" value="<?php echo ucwords($_GET['type'] == 'video' || $_GET['type'] == 'image' ? $_GET['type'] : 'web'); ?> Search" name="submit" id="submit" />
	</form>
</div>

The HTML structure is simple -- be mindful of the element ID's for styling and JavaScript functionality.

The CSS

#search-container	{ position:relative; padding:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
#search-options		{  }
	#search-options a	{ top:-20px; position:absolute; font-size:11px; padding:3px 6px; color:#00f; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; }
	#search-options a.active	{ z-index:5; text-decoration:none; font-weight:bold; color:#000; }
#query 				{ font-size:24px; padding:4px; background:#fff; }
#submit				{ font-size:24px; }

.web				{ background:#ccc; }
.images				{ background:#fffea1; }
.videos				{ background:lightblue; }

Style at will!

The MooTools

window.addEvent('domready',function() {
	var lynx = $$('#search-options a'), activeItem = $$('#search-options a.active')[0] || lynx[0], button = $('submit'), oTerm = 'Search';
	var searchForm = $('search-form'), container = $('search-container').set('class',activeItem.get('text').toLowerCase());
	lynx.addEvent('click',function(e) {
		//brick event
		e.stop();
		//manage "active" class
		activeItem.className = '';
		this.addClass('active ' + this.get('text').toLowerCase());
		activeItem = this;
		//manage URL and color class
		searchForm.set('action',this.get('href'));
		container.className = this.get('class');
		button.set('value',this.get('text') + ' ' + oTerm);
	});
});

The system works off of a system of adding and removing CSS class names. We also swap the form actions through each search type click.

Mapping out the the functionality for a system like this is fairly simple. What sets these type of systems is the great styling. Post in the comments if you've implemented a system like this!