snarfed.org

Ryan Barrett's blog

site search with the Google AJAX Search API

Fri, 10 Nov 2006 [comments (59)] [history] [rdf] [raw]

Updated 2007-12-21.

ajax_search.js uses the Google AJAX Search API to do site search. It's similar to Google's existing site search, except that it shows the results within your site, not Google's. It also degrades gracefully, by falling back to standard Google site search over HTTP for users who don't have JavaScript.

You can check out the JavaScript, or try it out right now! But heads up, your browser's back button won't work. Blame AJAX.

To use this on your site, first apply for an AJAX Search API key. Then, place ajax_search.js on your server and the following HTML on your page:

<form class="form" method="get" action="http://www.google.com/search"
  onsubmit="new site_search('[YOUR_DOMAIN]', q.value); return false;">
  <input type="hidden" name="sitesearch" value="[YOUR_DOMAIN]" />
  <input type="text" name="q" id="query" value="Search" />
</form>

<script type="text/javascript"
   src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=[YOUR_KEY]">
</script>
<script type="text/javascript" src="[PATH]/ajax_search.js"></script>


Replace [YOUR_KEY], [YOUR_DOMAIN], and [PATH] with your AJAX Search API key, your site's domain, and the path to ajax_search.js on your server, respectively.

Finally, set the results_div_id variable in ajax_search.js to the id of an div where you want search results to be placed. This div will be deleted and recreated when a search is performed. You can also customize results_header, results_footer, and searching_message, if you want.

The search results are placed in divs with distinct classes, so you can style them with CSS. Here are the classes:

gsc-title
gsc-back

gs-result
 |- gs-title
 |- gs-snippet
 |- gs-visibleUrl
 |- gs-watermark

gsc-branding
 |- gsc-branding-text
 |- gsc-branding-img-noclear


The AJAX Search API stylesheet has more details. As an example, this is the CSS used on this site. It's similar to the google.com style.

div.gs-result        { margin-top: 1em; }
div.gs-title         { text-decoration: underline; }
div.gs-visibleUrl    { color: green; }
div.gs-watermark     { display: none; }
div.gsc-back         { float: right; }
table.gsc-branding   { border: none; }
td.gsc-branding-text { color: gray; }


Happy AJAX searching!

ajax_search.js is copyright 2006 Ryan Barrett, and is distributed under the GPL.

See also:

comment bubble OpenID christopher baus, Sat 14 Oct 2006

Cool.  Got it to work on my site.  Could use some CSS love though.

comment bubble OpenID Isaac, Tue 17 Oct 2006

The link doesn't seem to work for me, neither on Firefox nor on IE. It only displays a "Searching..." comment. I guess the website has some deep secrets that I should not find!

comment bubble OpenID Matt, Wed 18 Oct 2006

Mine just says 'searching...' too, not sure what I am doing wrong.

comment bubble OpenID Ryan, Wed 18 Oct 2006

hmm, odd. if you're using firefox, could you pull up Tools=>Javascript Console, click Clear, then try searching again and see if it shows an error message?

comment bubble OpenID Matt (again), Fri 20 Oct 2006

Hi Ryan. First of all, thanks for posting this code on your site, so helpful.  But, it is working in firefox but not in IE.  It says 'the results are...' then no results appear.  It also has an error on the page.  When I look at the details it points to line 58 of the javacript which says this 'for (i = 0; i < results.length; i  ) '.  This is right before the 'ugly brittle hack'.  I am just using, in the html, a div tag of <div id="results"></div> where I renamed the id in the javascript.  I don't understand why it is not working, Any ideas?  Thanks again.

comment bubble OpenID Ryan, Fri 20 Oct 2006

argh, sorry for the trouble, matt.

IE is most likely getting confused because your div's id and the results variable have the same name. try renaming your div to something else, like "search-results", and change the results_div_id at the top of ajax_search.js to match.

comment bubble OpenID Matt, Fri 20 Oct 2006

That worked!  I don't know why I didn't realize what I had done.  Thanks again for the help, your code is awesome!!

comment bubble OpenID Larry, Wed 08 Nov 2006

Ryan, this is a very cool and helpful tutorial. I have one 'issue' w/ putting it on my site. Below each result it says "clipped from Google - 11/2006" Anyway to get rid of that?

comment bubble OpenID Larry again, Wed 08 Nov 2006

Also, is there any way to hide the URL below the result summary so there's just a link above?

comment bubble OpenID Ryan, Wed 08 Nov 2006

sure! you can hide individual parts of the search results with CSS. there's example CSS near the end of this article, and you can tools like Firefox's DOM Inspector, as well as Google's Ajax Search CSS, to dive deeper.

comment bubble OpenID Bob, Fri 10 Nov 2006

Instead of using a div tag to place the results, is there a way to put it in a table?  Thanks alot.

comment bubble OpenID Ryan, Fri 10 Nov 2006

if you're ok with putting all of the search results in a single td cell, you could just put a div inside that cell. however, if you want each result in its own row in the table, you'll need to write javascript to convert each div class="gs-result" into a tr.

comment bubble OpenID Bob, Fri 10 Nov 2006

I know you can put a div in a td tag but it doesn't seem to work when I do it with this.  I don't know javascript well enough, so I'll keep trying.  Thanks for the help.

comment bubble OpenID Aaron, Tue 02 Jan 2007

Nice code,  seems to be working alright for me, good work!

comment bubble OpenID Jim Van Abbema, Wed 03 Jan 2007

Hi Ryan, I'm impressed with the features in your code (particularly that results can be displayed within one's site).  My primary question is How can I place the form in my top frame and target a page with the div in it in the bottom frame?  I've attempted to change the .setLinkTarget in the ajax_search.js to "main" (the name of my bottom frame) or even to "blank," but it will not respond.  Can you offer some pointers on what I should specify in the form or the js file? 
  I have a test page that I've been experimenting with (http://nhmag.com/top-test.html) where I've placed the form in the position I would like it to be (the top of this page is to become a top frame) with the div lower on the same page, and I am getting some strange results.
  1.  Only a small portion of the documents containing any given work are displayed.  Entering "conservation," for example, displays only 4 results.  Is there a limit setting on this?
  2.  The name of a given page is shown (it is an active link to the page), and below the text sample are two full repeated URLs , one which is plain text, the other appears to be a link but does not function.  Can these be removed or hidden?
  3.  And, like Larry above, I would also like to get rid of that "clipped from Google" link.  But the CSS link you gave goes only to a general CSS tutorial.  Is there a more specific link that shows how to hide parts of the search results? 
  Thanks for any advice you can offer.

comment bubble OpenID ryan, Mon 08 Jan 2007

hi jim! thanks for the kind words.

i don't believe javascript in one frame can target the DOM in another frame. they're two entirely separate DOMs. i'm no expert, though, so a recent reference on DHTML/javascript/DOM might prove me wrong.

1. you can get up to 8 results for a search, but no more. this is a built-in limit, probably to prevent screen scraping. whether you actually get 8 results for a given search depends on what's in google's index.

2 and 3. sure! you can do both of these with CSS. to hide the URLs, use:
div.gs-visibleUrl { display: none; }

div.gs-visibleUrl-long { display: none; }

to hide the "clipped from Google" image, use:
div.gs-watermark { display: none; }

...but if you do, you'll be violating the terms of service! see section 2.3, Attribution.

comment bubble OpenID Todd, Fri 12 Jan 2007

I'd like to add the search box to the header of every page, but only have one page that shows the results of the search. Is there a way to do this? Excellent job BTW!

comment bubble OpenID ryan, Fri 12 Jan 2007

you mean, you'd like search results to appear in a new HTML page, retrieved with a standard HTTP GET or POST instead of an AJAX request?

sure, you could make the search box form submit to your search results page, and put an onLoad() in that page to trigger the actual AJAX search request. that's clunky, though. :/

comment bubble OpenID BIll, Tue 27 Feb 2007

Does the script work on an Intranet?

comment bubble OpenID Ryan, Tue 27 Feb 2007

sorry, no, it doesn't. it only searches google's public index of the web. you might be able to get it to work with the google search appliance, though.

comment bubble OpenID Glococo, Tue 13 Mar 2007

Hello, I want to search on a mysql table when I m typing on a form
What script does that ?

Thankyou, verymuch !

comment bubble OpenID Ajax is Google Code the Power, Mon 23 Apr 2007

Ajax is Google Code the Power

comment bubble OpenID stupid me, Thu 28 Jun 2007

one question does this search sites that has not been indexed by google? or this will supposedly search the entire web?

comment bubble OpenID ryan, Thu 28 Jun 2007

this only searches sites that have been indexed by google. if your site isn't in google's index, or if it's an intranet, this won't work for you.

google does have intranet search solutions. they're physical machines, though, and they cost money.

comment bubble OpenID DrStein, Mon 20 Aug 2007

Hi there

I loved the code, I was searching for a way to use the google search without making users leave my website.

Anyway, I think for usability is best to actually include de "Search" button, is there any way you can tell me how to do that?

Thanks a lot.


Felipe

comment bubble OpenID ryan, Mon 20 Aug 2007

sure! just add a submit button to the form, e.g.
<input type="submit" value="Search" />

comment bubble OpenID DrStein, Fri 31 Aug 2007

Hi again

I'm a little confused with something, I think I did everything right but I keep getting "no results" everytime I search, I thought It was because I indexed the site on google almost at the same time but time passes by and still no results. Do you know if this is because of a badly implemented code or I just have to wait?

Anyway, here goes my javascript code... sorry for the trouble


<div class="search">
<form class="form" method="get" action="http://www.google.com/search"
  onsubmit="new site_search('http://www.revistaasiatica.cl/', q.value); return false;">
  <input type="hidden" name="sitesearch" value="http://www.revistaasiatica.cl/" />
  <input type="text" name="q" id="query" value="" />
  <input type="submit" value="Buscar" />
</form>

<script type="text/javascript"
  src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=keygoeshere">
</script>
<script type="text/javascript" src="../../permanent/ajax_search.js"></script>

Didn't know if it was necessary but I removed the key from the code

Thanks


Felipe

comment bubble OpenID ryan, Fri 31 Aug 2007

hi felipe! try using just your domain, "revistaasiatica.cl", without the "http://www.", as the site_search() parameter and sitesearch input value.

comment bubble OpenID Andrea, Tue 04 Sep 2007

Hey,
first of all thanks for this great script.
I have some trouble though when I search a second time without reloading the page. It automatically switches to google.com and doesn't stay on my site...
Another problem is that it shows only a few results compared to the results that appear at googles original site. Is this on purpose  and is there any way to fix these two issues?

And then, may I spread the results over more than one site? So that I only show about 4 results and to see the next four, the user has to click on a "next"-button that loads them dynamically into the divs... How could this work?

I appreciate your help,
thanks in advance,
Andrea

comment bubble OpenID DrStein, Tue 11 Sep 2007

Me Again XD

This has less to do with the coding, because as far as I can tell it's working great (and I have to thank you for that really).

Do you know how long it takes for google to update their err... database I guess, so it can show new results, because I put the search code in a test page first to see how it worked, but now everything is OK and it keeps giving me results like www.revistaasiatica.cl/test/x.html.

I'm guessing it's just a matter of time before it's updated, but since you got the search box here, I thought I'd ask how long it takes.

Thanks again, you've been great.


Felipe

comment bubble OpenID Dr.Dre, Thu 11 Oct 2007

I must say you are blog is the best, brother. I searched Google up and down can't not find a simple example let alone tutorial. Then, I found your blog and I became the happiest programmer in the world. YAHOOOOOOOOOOOOOOO for snarfed.org.

comment bubble OpenID Dr. Dre, Sat 13 Oct 2007

Hi, it's me again. I am having problem with this search. It does return result but I can't seem to position the result where I want it to appear. Your search result appears clean and neat within that box. I went through your site but can't figure it out. Please, help.

comment bubble OpenID Carl, Thu 25 Oct 2007

"sure, you could make the search box form submit to your search results page, and put an onLoad() in that page to trigger the actual AJAX search request. that's clunky, though."

I really need this, but do not know how to implement it. Can you (Ryan) or some else please post the codes.

Thanks

comment bubble OpenID SimonRaven, Tue 20 Nov 2007

hey,

firebug and the JS console keep complaining about GwebSearch not being defined. I can't find that function in either uds.js or ajax_search.js at all. I get the same results as  "Andrea, Tue 04 Sep 2007": page goes to google.com after I hit enter in the search box (I defined the needed ID, etc.) WTH is this function? :)

comment bubble OpenID SimonRaven, Tue 20 Nov 2007

Oh, and folks might want to s/&/&amp/; that URI, or to ; , otherwise the XML checker in some browsers will puke.

comment bubble OpenID ryan, Tue 20 Nov 2007

The GwebSearch class is part of Google AJAX Search's public API. It's used in ajax_search.js on line 36 to do the search. It's defined in one of the other script files that uds.js pulls in.

I took a look at the uds.js script tag on http://simonraven.kisikew.org/home/, and it looks like you have a couple &amp; sequences in the URL that shouldn't be escaped. Try converting them to plain & characters.

comment bubble OpenID Jane, Fri 21 Dec 2007

Ryan, this is brilliant - thanks! I've got it working really nicely.

One question, though: I notice that Google have now increased the results returned to 32, with a pagination feature. How can I add that to your script?

Thanks

comment bubble OpenID ryan, Fri 21 Dec 2007

thanks for the ping! i've updated the script to pull in results from all of the pages.

comment bubble OpenID Jane, Fri 21 Dec 2007

Many thanks for a fantastically quick response, Ryan. Unfortunately, when I replace the old script with this version, I get an error: Line 32, character 13, Expected identifier. Do I need to modify my page as well?

Thanks

comment bubble OpenID ryan, Fri 21 Dec 2007

hmm. it should be a drop-in replacement, so no, you shouldn't have to modify your HTML.

this site is currently using the new script, and it works for me in firefox 2. where do you see the error? which browser are you using?

comment bubble OpenID ryan, Sat 22 Dec 2007

never mind, i see it in IE 6. ok, debugging... ...fixed. whee, gotta love browser interoperability testing. thanks for catching that!

comment bubble OpenID Jane, Sat 22 Dec 2007

Ryan,

Many thanks, that's fine now - on IE 7 as well.
Merry Christmas!

Jane

comment bubble OpenID Dan, Tue 01 Jan 2008

Hi, i am very new to Ajax and am unsure what to do. i have followed instructions and all i get when i type into the input box and search is the google website.

http://www.gameslayer.co.uk/search/index.html
and the javascript is ajax_search.js.

Thanks in advance for any help.

comment bubble OpenID ryan, Tue 01 Jan 2008

hi dan! it looks like you have the same problem as simonraven, above. try changing the &amp; sequences in your script tag's src attribute to plain & characters.

comment bubble OpenID Dan, Tue 01 Jan 2008

thanks for your quick reply, tried that and i still get the same problems, do you know if there could be another problem?

comment bubble OpenID ryan, Tue 01 Jan 2008

ah, you need a div for the results to go in. try adding <div name="page-content" />.

comment bubble OpenID Dan, Tue 01 Jan 2008

i added the div, i think in the right place, not working still, not sure if i added the div correctly though.

comment bubble OpenID ryan, Wed 02 Jan 2008

sorry, my mistake. the div snippet should be <div id="page-content" />. you also need to close the <script> tag just before it with </script>.

i made a local copy with those changes, and it seems to work.

comment bubble OpenID Dan, Wed 02 Jan 2008

thanks for all your help, that works now.

comment bubble OpenID Pat, Sat 02 Feb 2008

Thanks for this app, I have been looking for something like this for a long time.
My question is how I can keep it from switching to google results page instead of my site page. I don't see where I made a mistake in the coding. Can you help?

comment bubble OpenID Travis, Mon 04 Feb 2008

Hi Ryan,

Great script! I've had no problems getting it to work.

Do you intend to add pagination through result sets?

i.e. http://www.google.com/uds/samples/apidocs/raw-searchers.html

I gave a go at this, but I don't have much of an understanding of JavaScript/AJAX.

Thanks!

comment bubble OpenID Stephen, Fri 18 Apr 2008

Ryan,

  I am a beginner to write the scripts.
Here is the code, I modified from your source code.

<form class="form" method="get" action="http://www.google.com/search"
  onsubmit="new site_search('http://www.myname.com', q.value); return false;">
  <input type="hidden" name="sitesearch" value="http://www.myname.com" />
  <input type="text" name="q" id="query" value="" />
  <input type="submit" value="search" />
</form>

<script type="text/javascript"
  src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=mykey">
</script>
<script type="text/javascript" src="ajax_search.js"></script>

After I enter something to search, it will jump out to google and show the following message:

Your search - test - did not match any documents.

Suggestions:
Make sure all words are spelled correctly.
Try different keywords.
Try more general keywords.
Try fewer keywords.

Please help me to find the issue.

Thanks,

Stephen

comment bubble OpenID Ahmad, Wed 12 Nov 2008

Hello Ryan, many many thanks for the script......

may i know how to implement paging like (pages : 1,2,3,4) if I need not all the results in the same page, I want 10 or 20 records per page...

thanks,

Ahmad.

comment bubble OpenID Web Design Horsham, Mon 12 Jan 2009

Hi thankyou for the quick script! Could you tell me if there are any ways to show 100 results on my page?

Thanks

Charlie

comment bubble OpenID rufus, Sat 17 Jan 2009

cool, this is a helpful little page.
Can you tell me, is it possible to exclude certain pages from the results? or limit the search to one directory within the domain?

comment bubble OpenID just_me, Fri 27 Mar 2009

I am here with Carl; I love the idea of ajax, but I really need the results to open in a new page, designed specially for the "Search Results" . I am a good designer, but terrible coder, and I love buy a brew for a person who could explain how to get the search query to a new page, that would then trigger the ajax form to display results in the div. anyone ?

I would paypal you money for a sixpack!

thanks.

comment bubble OpenID Maulik, Fri 11 Sep 2009

I have joined the ajax search party, 'twas painless!

comment bubble OpenID Jim, Wed 23 Sep 2009

Thanks m8!
Works fine!

comment bubble OpenID Web Design Horsham, Fri 22 Jan 2010

It's been a year since I last used this.. Thanks again!

Post a comment...



Simple HTML and wiki markup are allowed.