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:

51 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  
Blogger wongold said...

While some wow gold of these wow gold questions may buy wow gold be easy to buy wow gold answer, others cheap wow gold take time and cheap wow gold effort to world of warcraft gold discover fast wow gold the truth.With so many sell wow gold options age of conan gold available to aoc gold the average ffxi gil player, it's a warhammer gold shame runescape gold that it takes tibia gold so long swg credits to level a lotro gold character 2moons dil sufficiently to explore the maple story mesos various play-styles, eve isk challenges lineage 2 adena and features eq2 plat the game fully wow power leveling supports. Imagine wow power leveling the freedom of power leveling being able to world of warcraft power leveling select between a fully wow power level equipped PVP Rogue wow leveling to fight other wow leveling players, or a fully geared power leveling healing Paladin, ready to aid his guild in taking down Nefarian, the final boss of Blackwing Lair. Being able to enjoy World of Warcraft so fully would be a true reward.

8/18/2008 03:10:00 AM  
Blogger yangkee said...

wow goldwow goldwow gold Age of Conan gold cheap wow gold to our loyal reliable customers.

8/21/2008 04:14:00 AM  
Anonymous Anonymous said...

The miraculous railway Tibet Tour now closely connects mainland China and remote Tibet Travel, which will speed up economic development Tour in Tibet. Travel to Tibet The Tibet Railway will not only bring about Tibet Trekking a significant change of the mystical view of the outside world to Tibet Map, but will also create a better cognition of the Tibetan people by the outside world.Tibet Tour Guide There is a strong belief that Tibet will welcome a better tomorrow thanks to this widely hailed sacred road.

8/27/2008 12:24:00 AM  
Blogger wow gold said...

wow gold
aoc

gold

lotro gold


压片机
制袋机、

无纺机

塑料制袋

机、小型塑料制袋机

无纺布

制袋机、全自动无纺布制袋机

三边封制袋

机,塑料薄膜制袋机

吹膜机

、塑料吹膜机

模切机、

全自动模切机

龙泉青瓷
集装袋
集装袋


集装袋
全自动切台
切卷机
标牌、工号牌
标牌,工号牌
马口铁徽章、奖牌


钥匙扣,开瓶器


校徽,校牌
工号牌
马口铁徽章


奖牌
钥匙扣
开瓶器
校徽
校牌
Guild Wars Gold
second

life

Eve

Online gold

SilkRoad
EverQuest 2
wow cdkey
wow The Burning Crusade CD

Key

wow

TBC

WOW 60

Tage Game Time Card

Lord of

the Ring gold

wow gold
伺服电机,大

功率伺服电机

伺服控制

器,水冷电机、高速电机

图腾机柜
蜡像
玻璃瓶
压片机
制丸机
灌装机,熔封机,轧

盖机

粉碎机
混合机
颗粒机
灌装机、轧盖机、熔

封机

灌装机、轧盖

机、熔封机

混合机
粉碎机
压片机
颗粒机
切片机,洗

瓶机,数片机,填充机,糖衣机,切片机


水处理设备,水处理机械设


饮料设备


硅藻土过滤机,不

锈钢砂棒过滤机

不锈钢饮料泵,

双联过滤器

活性炭过滤机,微孔

膜过滤机

冷热缸,夹层


颗粒包装

机,气动式颗粒包装机,机械式颗粒包装机

冲瓶机
充填机
打码机
粉剂包

装机

封口机
过滤器
灌装生产线
汽水混合机
水处理设备
三角包

装机

贴标机
洗瓶机
液体包

装机

真空包装机

模切机
温州家具
烤炉、饺子机
汤圆机,洗碗机
贴标机

google左侧排名
google排名
温州网

站建设

温州网

站推广

搜索引擎

优化

温州网站建设
温州网页设计
温州网页制作
瑞安网站建设、瑞安网页

设计、瑞安网页制作

link
link
link
The End of the

Road

link
link
link
buy wow gold
瑞安网站建设,瑞安网页

设计、瑞安网页制作,瑞安网络公司

瑞安人才
瑞安人才网

8/27/2008 09:18:00 PM  
Anonymous Anonymous said...

ffxi gil
Maple Story Mesos
wow gold
wow gold
wow gold

age of conan gold
age of conan
age of conan power leveling
age conan gold
age of conan gold
age of conan power leveling
age conan gold
age of conan gold
age of conan power leveling
age conan gold
age of conan gold
age of conan power leveling
age conan gold
age of conan gold
age of conan power leveling
age conan gold
age of conan gold
age of conan power leveling
age conan gold
age of conan gold
age of conan power leveling
age conan gold
age of conan gold
age of conan power leveling
age conan gold
age of conan gold
aoc gold
age conan gold
age of conan power leveling
aoc power leveling
age conan gold


Runescape Money
Runescape Gold
Runescape Items
Runescape Money
Runescape Gold
Runescape Power leveling
Runescape Money
Runescape Gold
Runescape gold
runescape money
Runescape Money
Runescape
Runescape Money
Runescape Power leveling
Runescape Items
runescape money
money runescape
Runescape Gold
age of conan gold
age conan gold
aoc gold
age of conan power leveling
aoc power leveling
aoc leveling

archlord gold
anarchy online credits
cabal alz
city of heroes influence
coh influence
city of heroes
city of villains infamy
cov infamy
city of villains
dofus kamas
kamas dofus
dofus
daoc gold
daoc plat
eve isk
eve online isk
eve online
everquest 2 gold
eq2 plat
Ever Quest 2
final fantasy xi gil
Final Fantasy XI
buy ffxi gil
gaia online gold
gaia gold
guild wars gold
gw gold
guild wars
hellgate london palladium
Hellgate London
dofus kamas
dofus gold
dofus
dofus kamas
dofus

wow gold
world of warcraft gold
buy wow gold
cheap wow gold
wow power leveling
eq plat
EverQuest gold
Maple Story Mesos
MapleStory mesos
MapleStory Meso
Final Fantasy XI gil
ffxi gil
buy ffxi gil
dofus kamas
kamas dofus
lotro gold
lotr gold
lord of the ring gold
Lineage adena
Lineage 1 adena
Silkroad gold
buy silkroad gold
flyff penya
buy flyff gold
flyff money
eve online isk
eve isk
2moons dil
2moons gold
eq2 plat
EverQuest 2 gold
EverQuest 2 plat

maplestory Mesos
MapleStory meso
maple story
Maple Story Mesos
maplestory Mesos
MapleStory meso
Maple Story
Lineage adena
Lineage 1 adena
Lineage 1
lotro gold
lotr gold
The Lord Of The Ring
lord of the ring gold
ge money
granado espada vis
granado espada gold
Granado Espada

data processing service
data processing
data process
data processing service
data processing
data processing service
data processing
data process
dofus kamas
kamas dofus
dofus kamas
kamas dofus
buy kamas
dofus kamas
kamas dofus
buy kamas
dofus kamas
kamas dofus
buy kamas
dofus kamas
kamas dofus
buy kamas
///////////////////////////////////////////////
buy kamas
data process

wow gold
wow leveling
hero online gold
last chaos gold
ragnarok zeny
ro zeny
rappelz rupee
rappelz gold
Silkroad gold
buy silkroad gold
SWG Credits
star wars galaxies credits
tales of pirates gold
age of conan


age of conan gold
aoc gold
aoc power leveling
aion gold
buy aion gold
anarchy online credits
anarchy online credit
archlord gold
buy archlord gold
City of Heroes Infamy
coh influence
City of Villains infamy
cov infamy
Gaia Online Gold
gaia gold
Gods and Heroes
gods and heroes gold
ge money
granado espada vis
granado espada gold
hellgate london palladium
Hero online gold
buy hero gold
Last Chaos Gold
buy Last Chaos Gold
gw gold
Guild Wars Gold
Lineage 2 adena
buy lineage 2 adena
Tales of Pirates Gold
Tales Of Pirates Online
rappelz rupee
rappelz gold
Hellgate London
hellgate london palladium
Second Life Linden
second life money
Vanguard money
Buy Vanguard Gold
Tabula Rasa Credit
tabula rasa credits

8/28/2008 02:51:00 AM  

Post a Comment

Leave a comment