Monday, June 05, 2006

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. . . .

Labels:

38 Comments:

Blogger CyberCoder said...

Excellent job, very nice layout and use of the API, I plan on using this on some of my sites, thanks for sharing with everyone.

6/05/2006 04:14:00 PM  
Blogger sumanth krishna said...

Good one and thanks for sharing this with all.
I also included the Search API in my blog, but for some reasons I could not get it on. You can visit my blog: http://sumanthtechsavvy.blogspot.com/ and help me if you can.
thanks again and keep going...

6/08/2006 10:01:00 AM  
Blogger sumanth krishna said...

Let it be just above the About Me section in the sidebar.
thanks,
Sumanth.
tosumanthkrishna@gmail.com

6/08/2006 10:20:00 AM  
Blogger dataphage said...

Now if only blogger would introduce native categories with their xml there would be a darned easy way to pass these to the google blogsearch for an instant "who else is blogging about:" link.

Damn that would be good.

6/08/2006 09:32:00 PM  
Blogger Jen said...

thanks for sharing such a valuable information- you certainly seem to know what you're doing =)

6/09/2006 12:59:00 PM  
Blogger tiznit-ihassern said...

how to get google ajax search for your site

6/10/2006 05:50:00 AM  
Blogger Mike said...

Very helpful information here! It's appreciated. I was wondering if anybody could email me and answer me one simple question? I don't use css in my coding (I just don't enjoy it...), but I could still use the javascript and the div tags in my html, right? And still get the search box?

6/10/2006 04:05:00 PM  
Blogger CJ said...

You betchya, Mike. You don't need to use the CSS to implement the Ajax search. It's only for positioning (the upper right in my case) and styling (the font and the border in my case).

6/10/2006 06:07:00 PM  
Blogger Genevieve said...

I am so going to try to get this working on my blog!

6/11/2006 01:24:00 AM  
Blogger Meredith said...

Thanks for posting this! Having a bit of trouble getting it working myself (so far only the "clear" button is showing up, for whatever reason) but it seems like an amazing tool.

6/12/2006 01:40:00 PM  
Blogger Dan Kott said...

CJ is the man!
They should change the name to CJAX!

6/12/2006 01:51:00 PM  
Blogger Eye in the Sky said...

Sorry for the newbie question, but does your solution require any particular DOCTYPE?

6/12/2006 03:20:00 PM  
Blogger CJ said...

To my knowledge, no DOCTYPE is needed.

6/12/2006 04:04:00 PM  
Blogger Deepak{dk} said...

Pardon me for all together different question, but I'm curious to know if it is possible to get the Google Suggest way this search bar.

Yours is another great way to do that. But, If it is possible to do Google Suggest way then can you help me with it?
Email: chillingdk@yahoo.com

Thanks for your help.

6/14/2006 06:10:00 PM  
Blogger D said...

I can't seem to get this to work, there is no search box

6/15/2006 01:04:00 PM  
Anonymous Anonymous said...

asdfadsfadsf

6/23/2006 01:01:00 PM  
Blogger Nathan said...

Sooo... How about you tell us WHY this AJAX search bar is so cool, before I add it to my site. :)

6/25/2006 06:30:00 PM  
Blogger Lola Burns said...

PROPS TO YOU MY CYBERBLOGGER ANGLE!

THANKS SO MUCH FOR CONTINUING AN ABBIE HOFFMAN MANNER OF STAYING A STEP AHEAD OF "THE MAN"! REMEMBER HIS BOOK? INTITLED, "STEAL THIS BOOK!".

THIS GENIUS WROTE A WONDERFUL TRAVELING THROUGH LIFE GUIDE LATE 60'S-EARLY 70'S AND AT THE TIME EASILY ATTAINABLE BY THE MASSES.

I SO APPREACIATE YOUR TOIL AND TROUBLE VIA TRUDGING THE ROADS OF CYBERSPACE, PICKING UP INFO, SPREADING IT WIDE OPEN, AND KEEPING IT REAL! THANKS SO MUCH!

6/25/2006 09:22:00 PM  
Blogger Lola Burns said...

This post has been removed by a blog administrator.

6/25/2006 09:25:00 PM  
Blogger god_is_good478 said...

This is very good stuff, my heartfelt thanks!!

7/04/2006 08:10:00 PM  
Blogger Jigar Shah said...

What modification do i need to make it compatible for my personal web...that is for local search? Please mail me at jigar_shah83@hotmail.com

7/05/2006 08:08:00 AM  
Blogger god_is_good478 said...

Well I have finally gotten round to adding the AJAX search toolbar to my blog. huffalum-tech.blogspot.com

Its rather cool. =) But it is a little unstable at the moment, does anyone know why? I also embed meebo, would that be a problem?

Anyways just to answer some queries, if you see only a "clear" link.

It is likely that you have not gotten for yourself an application key from google.

Read the following for more info:



gOOGLE ajax sEARCH blOG


Google AJAX search examples


Good related article from tech2all

Get your AJAX search Key

8/17/2006 01:28:00 AM  
Blogger Chopianissima said...

Thanks to your excellent documentation I successfully implemented Google AJAX Search on my TypePad blog CleverClogs (http://www.cleverclogs.org) yesterday. I studied the code in your blog post, the code that you currently use on your site (slightly changed I think) and the Google sample code that shows up once you've signed up for an API license key.

To express my gratitude I posted a little thank-you note for you at the bottom of today's post http://www.cleverclogs.org/2006/09/9_rss_reader_ho.html
(would have used trackback if you had offered that option)

Thanks so much again!

9/09/2006 05:26:00 PM  
Blogger mgc said...

Are u using blogger in beta ?
I tried many times in my blogger in beta, but it doesnt works.

10/13/2006 12:09:00 AM  
Blogger CJ said...

I'm not using Blogger Beta, but I plan to soon write up a method to get Google Ajax search working with Blogger Beta as well.

10/13/2006 03:01:00 PM  
Blogger Chonborworn said...

Demo : http://www.modelalive.com

3/22/2007 10:28:00 AM  
Anonymous Alpharetta GA Real Estate said...

Good stuff. I'm thinking I'll modify this slightly for one of my sites.

4/28/2007 10:05:00 PM  
Anonymous Anonymous said...

good job!!!

thanks
get rich with adsense

5/24/2007 03:14:00 PM  
Blogger Hazeckz said...

cmon men, there are easyest ways to do it!!!!! check my blog and look at it it beautyfull ejjeje

6/04/2007 04:18:00 PM  
Anonymous Rosie said...

These comments have been invaluable to me as is this whole site. I thank you for your comment.

7/09/2007 02:52:00 PM  
Anonymous Anonymous said...

Can be good but you re a very bad teacher. I just put an entire java menu in my site from www.milonic.com and lots other stuff, and I still cant make a google search tool. If you dont know to explain... just dont say anything.

9/12/2007 10:30:00 AM  
Blogger Daniel said...

Hi There!

Very awesome, thank you so much. By the way, in the HTML code, isn't there a div ending missing at the end?

10/30/2007 02:00:00 PM  
Blogger Marianita said...

I am just trying to understand this. I´ve got my code yet, and I´ve visited a lot of sites that tells me how to add google ajax to my blog, and i just can´t. :(
I´m a mess with html!!!! Maybe blogger should add it as a widget for people like me.

11/14/2007 02:56:00 AM  
Anonymous Dna said...

Damn that would be good.

3/15/2008 02:30:00 PM  
Blogger searchfile said...

I did my favourite search with google ajax here

4/22/2008 07:34:00 AM  

Post a Comment

<< Home