Tuesday, August 15, 2006

Google AJAX Search API: A simple web search example

I just discovered Google AJAX Search API. It looks to have been about since the beginning of June 2006. Very nice it is too, although some may say it would have been easier if we could get results from Google's search engines (local, web, video and blog) in the OpenSearch Response XML format.

The Google AJAX Search API returns results in JSON format. There are some very nice and some quite advanced usage samples to peruse on Google's site. For some reason the simplest example of how to use the API, i.e. to obtain a simple list of results, seems to be missing from the usage samples. So here is an example of how to do this (note: the API limits you to getting either 4 or 8 results).

You'll also need to obtain a Google AJAX Search API key. You can see the example below working here [requires JavaScript enabled obviously!], narcissistically the example searches for my name on Google web search. I'm sure that somebody out there will find this very simple example useful!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Very Simple Web Search - Google AJAX Search API demo</title>
<style type="text/css">
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
font-size: small;

.url {color: green;}
.cached {color: #77C;}
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=0.1&amp;key=<INSERT API KEY>"
<script type="text/javascript">

var gWebSearch;

function OnLoad() {
// Initialize the web searcher
gWebSearch = new GwebSearch();
gWebSearch.setSearchCompleteCallback(null, OnWebSearch);
gWebSearch.execute("mark mclaren");

function OnWebSearch() {
if (!gWebSearch.results) return;
var searchresults = document.getElementById("searchresults");
searchresults.innerHTML = "";

var results = "";
for (var i = 0; i < gWebSearch.results.length; i++) {
var thisResult = gWebSearch.results[i];
results += "<p>";
results += "<a href="\""" + thisResult.url + "\">" + thisResult.title + "<\/a><br \/>";
results += thisResult.content + "<br \/>";
results += "<span class=\"url\">" + thisResult.url + "<\/span>";
if (thisResult.cacheUrl) {
results += " - <a class=\"cached\" href="\""" + thisResult.cacheUrl + "\">Cached <\/a>";
results += "<\/p>";
searchresults.innerHTML = results;

<body onload="OnLoad()">
<div id="searchresults"></div>


Mark McLaren said...

Your sample is not the simplest way to use the API. Check out the very first sample in the documentation, the "Hello World" of the Google AJAX Search API:


The very first sample linked from the usage samples page is similar: http://www.google.com/uds/samples/apidocs/helloworld.html

Your sample does not use the GSearchControl object and is therefore very advanced.

Note: Comment imported. Original by mark lucovsky website: http://code.google.com/apis/ajaxsearch/index.html at 2006-08-18 04:07

Mark McLaren said...

Hi Mark,

Thanks for your comment, I completely appreciate that if you want a simple Google search UI widget on a page then using the GSearchControl is the way to go.

I added the above simple example for those wanting to do a potted search from inside their JavaScript applications. I think there are a lot potential uses for the Google AJAX Search API without needing to render the UI elements. For the above code I was inspired by the "My Favorite Places" Google Maps API/Google AJAX Search API mashup example.

Without a simple non-UI usage example there is a slight danger that developers might not realise that the Google AJAX Search API can be used without rendering the UI elements.

I didn't think I was doing anything particularly advanced so I will take that as a compliment!

Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2006-08-18 09:19

Mark McLaren said...

Hi Mark,

Really a very useful article. But I was unable to run the sample using my google key.

Following javascript error is displayed

'null is null' or is not an object at searchresults.innerHTML = ""; //line 29 char 8

Please let me know if I need make some modifications to the code
Note: Comment imported. Original by venki at 2007-08-28 06:40

Mark McLaren said...

Hi venki,

This is most odd, this link still works for me in IE7 and Firefox 2.

Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2007-08-31 16:20

Mark McLaren said...

Thanks very useful, I amgoing to use this on my site using my own search interface and just display the results, no need for google to be plastered everywhere. excellent thanks
Note: Comment imported. Original by Allan at 2008-01-02 09:27

Mark McLaren said...

OK I'm a designer, and I have managed to add the search engine to my site. However – i'm NOT a programmer of any means, I can get by doing certains things. The one thing I want to do is format the CSS in the results beyond what the 'look n feel' allow. What I don't know is how to do this. I haven't found anything on the net that states it in laymans terms.
Note: Comment imported. Original by Paul website: http://www.lynchdesign.com.au at 2008-01-15 04:35

Mark McLaren said...

Interesting idea Paul, I will get back to you about this - it will require me to do some further JavaScript programming but it looks very possible.
Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2008-01-15 13:48

Mark McLaren said...

Great, thanks. I was just looking for this.

Incidentally, I think the reason they leave out this 'most fundamental' example in the documentation is because it gives a lot of freedom to change the results, something which is prohibited in the Terms of Use. It also makes it very easy to avoid putting up the Google branding - which is another legal requirement. By making sure that the vast majority of people use a searchControl object, they ensure that most projects tow the line, but also give the freedom for more techie people to dig further if they need to.
Note: Comment imported. Original by Ben Hayes website: http://www.thesheep.co.uk at 2008-02-27 22:16

Mark McLaren said...

Actually it looks like they do have a raw search example over there at Google, but it is not very easy to find:

Note: Comment imported. Original by Ben Hayes website: http://www.thesheep.co.uk at 2008-02-27 22:55

Mark McLaren said...

excuse me but without using SearchControl how can an application send "Search Query" in the execute() method?

I have an application that I want to send user input for search without using SearchControl (from another input) how can I do that?
Note: Comment imported. Original by Halleh at 2008-04-27 13:18

Mark McLaren said...

I haven't looked at this API for a long while, I'm sure there have been significant improvements since I last looked. Using the GSearchForm, you would need something like this:

GSearchForm method

In the GSearchForm case the API takes care of rendering the search form. If you want to render the search form yourself, maybe as part of a larger form, you would need something more like this:

DIY search

However, with this method you would probably need to handle all your form processing with JavaScript. (Incidentally, I'm no legal expert but I think you need to display Google's branding somewhere when you use their API.)

Alternatively, you can now access the Google AJAX Search from the server side, see:

Flash and Server Side Access

Google offers Search, Feed, and Translation APIs to Non Ajax Usage

Flash and other Non-Javascript Environments



Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2008-04-28 08:53