Stuff to Think About: How to Get Google AJAX Search For Your Site

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: google

51 Comments:

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
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
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
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
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
Skeemer001 said...: Yeah!; 6/09/2006 02:58:00 PM
tiznit-ihassern said...: how to get google ajax search for your site; 6/10/2006 05:50:00 AM
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
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
Genevieve said...: I am so going to try to get this working on my blog!; 6/11/2006 01:24:00 AM
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
Dan Kott said...: CJ is the man!
They should change the name to CJAX!; 6/12/2006 01:51:00 PM
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
CJ said...: To my knowledge, no DOCTYPE is needed.; 6/12/2006 04:04:00 PM
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
D said...: I can't seem to get this to work, there is no search box; 6/15/2006 01:04:00 PM
Anonymous said...: asdfadsfadsf; 6/23/2006 01:01:00 PM
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
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
Lola Burns said...: This post has been removed by a blog administrator.; 6/25/2006 09:25:00 PM
god_is_good478 said...: This is very good stuff, my heartfelt thanks!!; 7/04/2006 08:10:00 PM
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
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
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
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
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
Chonborworn said...: Demo : http://www.modelalive.com; 3/22/2007 10:28:00 AM
Chonborworn said...: Ajax Search on your site [Full]; 3/22/2007 10:31:00 AM
Chonborworn said...: Demo : Ajax Search on your site [Full]; 3/22/2007 10:32:00 AM
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 said...: good job!!!

thanks
get rich with adsense; 5/24/2007 03:14:00 PM
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
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 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
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
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
Dna said...: Damn that would be good.; 3/15/2008 02:30:00 PM
searchfile said...: I did my favourite search with google ajax here; 4/22/2008 07:34:00 AM
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
yangkee said...: wow gold wow gold wow gold Age of Conan gold cheap wow gold to our loyal reliable customers.; 8/21/2008 04:14:00 AM
夕莙 said...: 同声翻译同声传译会议设备租赁同声翻译设备文件柜论文发表同声传译设备租赁同声传译表决器租赁更衣柜论文发表会议设备租赁

升降机升降平台登车桥升降机铝合金升降机液压机械升降台高空作业平台升降机升降平台无缝管升降平台弹簧升降机数据恢复升降机 RAID数据恢复北京心理咨询服务器数据恢复液压升降机无缝钢管升降平台博客升降机 Google排名网站优化心理咨询升降机升降平台

Cheap WoW Gold, World Of Warcraft Gold,the best WoW PowerLeveling and other MMORPG Power LevelingWOW Gold WOWGold World Of Warcraft Gold WOW Power Leveling WOW PowerLeveling World Of Warcraft Power Leveling World Of Warcraft PowerLeveling

Gas Alarm,Gas Detector,Breathalyser,Breathalyzer,Alcohol Tester,Co Alarm.Breathalyzer Gas Alarm Breathalyser Co Alarm Co Detector Alcohol Tester Alcohol Tester Gas Detector; 8/22/2008 12:29:00 AM
dd0251 said...: nitrile gloves
spray booth; 8/22/2008 08:43:00 AM
ccvdv said...: 無料動画
 プロバイダー
 求人
 アルバイト
 dvd
就職; 8/23/2008 09:32:00 AM
runescape said...: lotro
lotro gold
lotr online
lotr online
lotro money
lord of the ring
lotro
lotr online
lotro gold
lotro money
lord of the ring
maplestory
maple story
maplestory mesos
maple story mesos
maple story hacks
maplestory hacks
maple story cheat
maplestory cheat
cheap maplestory mesos
buy mesos
cheap maple story mesos
buy maplestory mesos
cheap maplestory mesos
maplestory
maple story
maplestory mesos
maple story mesos
cheap maplestory mesos
buy mesos
cheap maple story mesos
buy maplestory mesos
cheap maplestory mesos
wow gold
buy wow gold
cheap wow gold
wow
wow power leveling
wow powerleveling
world of warcraft
world of warcraft gold
warcraft gold
world of warcraft power leveling
world of warcraft powerleveling
runescape
runescape gold
runescape money
runescape
runescape gold
runescape money
runescape
runescape gold
runescape money
Age Of Conan
Age Of Conan Gold
AOC Gold
AOC Powerleveling
AOC Power leveling
Age Of Conan Powerleveling
Age Of Conan Power leveling; 8/24/2008 07:51:00 AM
Anonymous said...: v奥运成功，举国同庆: 电表控制器器，上海搬家，机械表调校器，膜结构，空气呼吸器，玻璃瓶，上海大众搬场，上海搬家公司，上海搬场公司。; 8/25/2008 01:53:00 AM
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
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 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
shishui said...: Big thanks for great site. I like spectrum. I have programmed for spectrum for myself.

j; 8/29/2008 03:20:00 AM
笑容工作室 said...: thanks.; 10/17/2008 12:42:00 AM
health said...: Thank you. Nice blogs.; 1/06/2009 03:33:00 AM

CJ Millisock

51 comments

How to Get Google AJAX Search For Your Site

51 Comments:

Post a Comment

Search this site

Most Popular Posts

Previous Posts

Archives

Contact Me

document.write(getDate("Monday, June 05, 2006"));

CJ Millisock

51 comments

How to Get Google AJAX Search For Your Site

51 Comments:

Post a Comment

Search this site

Most Popular Posts

Previous Posts

Archives

Contact Me

Subscribe to RSS