Google AJAX Search API

Hi,

While browsing through, I just stumblled upon what is known as Google AJAX Search API.

I was in seach of something where I could encorporate a google search right into my blog and which looks a touch different than the normal search page from google.

And I did well to land upon the Google AJAX Search API

It was quite simple and had enough tutorials and sample codes written for someone looking to encorporate a decent search into their site.

Take a look at the search box at the right bar on the blog. And try searching for something through it. It displays the results for each category as a seperate tab on the very same page.

Here is the way to encorporate the same in your blog.

1. Obtain a Google API Key. This is a kinda composite key for all the services of google that we would be using.

2. Integrate the API key code into your blog. OPen your blog and go to Edit HTML and in the head section of your blog, add the following script tag:

<script src='http://www.google.com/jsapi?key=developer_key'
type='text/javascript'/>

3. This will allow us to use all the services that google offers. Now we need to put up the code for displaying the search box. Here is the code for that.

<script type="'text/javascript'">
google.load("search", "1");

// Call this function when the page has been loaded

function initialize()
{

var searchControl = new google.search.SearchControl();

searchControl.addSearcher(new GwebSearch());

searchControl.addSearcher(new GvideoSearch());

searchControl.addSearcher(new GblogSearch());

searchControl.addSearcher(new GnewsSearch());

searchControl.addSearcher(new GimageSearch());

searchControl.addSearcher(new GbookSearch());

// create a drawOptions object

var drawOptions = new GdrawOptions();
// tell the searcher to draw itself in tabbed mode

drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
drawOptions.setSearchFormRoot(document.getElementById("searchPlaceHolder"));
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

}

google.setOnLoadCallback(initialize);
</script>

4. An explaination of this code is as below:
a. google.load("search", "1"); - This line of code prepares the search API from google and loads all the functions necessary to perfrom the search.

b. google.search.SearchControl();- This is the main control that displays the search results.

c. searchControl.addSearcher(new GwebSearch());- This is used to add various searchers to the control. Add as many searches as you like.

d. GdrawOptions();- A draawoptions object gives you the flexibility of customizing your search results display. The below two lines show the examples of its usage.

e. drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); - This tells the search control how to display the search results. Here we have set it to display in the form of different tabs.

f. drawOptions.setSearchFormRoot(document.getElementById("searchPlaceHolder"));- This tells the search option the control to which the search box would be bind. I created a div with the ID searchPlaceHolder to hold my search box.

g. searchControl.draw(document.getElementById("searchcontrol"), drawOptions); - This is used to actually draw the search control with the appropriate draw options.

h.

Loading

- This provides us with an instance of a searchcontrol. Place it where you want the results to be displayed.

This way it would display a search box where you place the searchPlaceHolder control and would display the search results where you place the searchcontrol.


Hope this helps a lot of people like me ....

-- Ashutosh