10 Aug 2011

Simple Search

I often come across interesting ideas and tools that I have no current use for but seem like they may be useful someday, so I bookmark them and hope I will recall them when needed. That process is what led to the current implementation of site search located at the bottom of each page on this blog.

At some point I came across an article on the the Google Webmaster Central Blog about enhancing a site's 404 page. I thought it was a pretty cool idea, and I'm using it on this site. The required code is very short:

 <script type="text/javascript">
	var GOOG_FIXURL_LANG = 'en';
	var GOOG_FIXURL_SITE = 'http://www.example.com'
 </script>
 <script type="text/javascript"
	src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
 </script>

The most interesting thing about it is that it adds a search form. It doesn't actually submit a form. It simply changes the current page's location to "http://www.google.com/search?q=site:www.heathanderson.net" (with the text from the text box appended) using JavaScript. This limits the Google search to (in this case) pages from my site. It is a really simple concept that I would like to think I would of eventually thought of (but probably wouldn't have).

When I needed a search for this site I decided to try this technique. So here it is, a simple search script:

 <script type="text/javascript">
	function simpleSearch(form) {
		var q = window.encodeURIComponent(form["q"].value);
		var url = "http://www.google.com/search?q=site:www.heathanderson.net ";
		url = url + q;window.location = url;
		return false;
	}

 </script>
 
 <noscript>
  You can search this site using <a href="http://www.google.com/search?q=site:www.heathanderson.net">Google</a>.
 </noscript>
 
 <form onsubmit="return simpleSearch(this)" method="get" id="searchForm">
    <input type="text" size="40" name="q" placeholder="Search this site...">
    <input type="submit" value="Search">
 </form>

I could have created the form element in JavaScript and appended it to the page, but that seemed more complicated than necessary. I also could have used an event handler instead of the inline onsubmit attribute, but again I point to the complexity. This way avoids most cross-browser pitfalls, and has the advantage of simplicity. I also added a link to Google inside a noscript tag for people that have JavaScript disabled.