Search Type Options with MooTools

By  on  

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!

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

Discussion

  1. Ahmed

    David,
    This is great, but I have 2 suggestions :-)

    1. Make the space between search types equal.
    2. Save the search type on page reload (Use cookies?)

    Other that that, it’s neat.

  2. Semantically, it would make more sense to have your search options as radio buttons.

  3. Ahmed

    @cancelbubble: Agreed. At least styled radio buttons.

  4. I love how the color alone makes a huge difference on how we interoperate the size of the container. Adding a simple border around it would help.

    David, just a note, this auto expanding box really needs some work.

    I know you love the gadgets, but as I type it just keeps getting bigger and bigger. And even using the arrow keys expands it. Now, I have to scroll down a ton to hit the send button.

    What about using an onChange event ad looking at the value of the textarea? Would probably work a lot better.

  5. I promise to stop making comments under the influence of sleepyness if you think of interoperate as Interpret

  6. Looks kinda awkward when switching between web/images/videos.
    I think it would be better if it was more consistent in the looks when switching.
    Would probably look better if the submit button was the same size throughout.

    And the big search engines out there would probably not use this type of method for obvious reasons xD

    Radio buttons as options / separate search pages is most likely what they’d be using.

  7. Mootools is Awesome !!!

  8. silver ray

    How to work at IE?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!