How to Get Google AJAX Search For Your Site

If you want some help getting the Google AJAX search control working on your site, here’s a quick and easy summary of what I did.

UPDATE: Google has updated their search control, making some of this code redundant. If you are using the code below, I’ve written another post outlining the changes you should make. You can view the new post here.

A little HTML, a little CSS, and a little Javascript should do the trick. In my HTML, I used two divs, and a link to clear the results. One div is the search control div, and the other is a wrapper for the search control div. I put it near the bottom of my html files so it appears on top of the content on each page. Here’s how it looks:

<div id="searchControlWrapper">
<a href="#" id="clearLink"
onclick="searchControlClear();">Clear</a>
<div id="searchControl"/>
</div>

I also added an onload function to the body tag:

<body onload="onLoad();">

For the css, I styled the wrapper to have an absolute position in the top right corner of my site. You can put it anywhere you’d like. I made both the search control and the clear link float left so they’d be on the same line. I gave the clear link some padding on the right. Here are the css changes I added:

#searchControlWrapper
{
position: absolute;
top: 5px;
right: 5px;
background: #FFF;
border-left: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding-left: 5px;
padding-bottom: 5px;
}
#searchControl
{
float: left;
}
#clearLink
{
float: left;
padding-right: 10px;
}

Lastly, the Javascript. I found this “hack” from a post made to Google Groups, but I changed it slightly. This goes inside the header of your html file(s) ( you could also put it in an external javascript file). You just need to change where I have “www.cjmillisock.com” to your site’s URL.

<script language="Javascript" type="text/javascript">
//<![CDATA[
function onLoad()
{
// Create a search control
var searchControl = new GSearchControl();

function MyBlogSearch()
{
this.execute_=GblogSearch.prototype.execute;
}
MyBlogSearch.prototype=new GblogSearch();
MyBlogSearch.prototype.setBlogUrl=function(blogUrl)
{
this.blogUrl_= blogUrl;
}
MyBlogSearch.prototype.execute=function(q)
{
if(this.blogUrl_)
q+=' site:'+this.blogUrl_;
return this.execute_(q);
}
var blogSearch=new MyBlogSearch() ;
blogSearch.setBlogUrl('http://www.cjmillisock.com');
searchControl.addSearcher(blogSearch);

// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchControl"));
}
function searchControlClear()
{
document.getElementById( "searchControlWrapper" ).innerHTML = "<a href='#' " +
"id='clearLink' " +
"onclick='searchControlClear();'>Clear</a>" +
"<div id='searchControl'/>";
onLoad();
}
//]]>
</script>

That’s all there is to it. Now if only Digg would replace their site-search with this. . . .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: