Google Ajax Search API – Description and Example

Want to add Google Search in your website or blog? Google AJAX search API is available to add on any website you own. You can restrict the search to the websites you own with Google Custom Search Engine. It can be single site or multiple sites or whole of internet.

First you need to sign up for the Ajax API key. Ajax API key is valid for all kind of Google supported Ajax APIs.
Sign Up for Google search Ajax api key:

http://code.google.com/apis/ajaxsearch/signup.html

You can see the demo here: Link to Working Example of Ajax Search API. At last of the page, you will find few images which is to show you what does the below explanation means.

Google has two modes of search results display:

- Linear (DRAW_MODE_LINEAR), Tabbed (DRAW_MODE_TABBED).
It is called draw options. Google draws the result on the element you provide. In tabbed mode,
you get the various result (web search, local) in a tab.

var drawOptions = new google.search.DrawOptions();

// tell the searcher to draw itself in linear mode
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); //DRAW_MODE_TABBED , DRAW_MODE_LINEAR

Search result comes in two or three sizes:

It is set of 4 and 8 entries on each page. For custom Google Search Ajax API, another one can be used.

google.search.Search.LARGE_RESULTSET - 8 results

google.search.Search.SMALL_RESULTSET - 4 results

google.search.Search.FILTERED_CSE_RESULTSET - 10 results
This only works with search scoped to custom search. But I saw it is working with
normal search with site restriction set. As in below example, site restriction set
to 'satya-weblog.com'.

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

searchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

Expand all results or expand only partial:

options = new google.search.SearcherOptions();
//EXPAND_MODE_PARTIAL / EXPAND_MODE_OPEN /EXPAND_MODE_CLOSED
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

Draw result in different container instead of default element provided on draw() method.

options = new google.search.SearcherOptions();
options.setRoot(document.getElementById("root"));

Working code of Google AJAX Search API:

JavaScript code:

<script src="http://www.google.com/jsapi?key=ABQIAAAADTpdjn5rN8WDjgKf3x4NXhT_tU6ZYUQ87WPpeMPQMkf261dU6BROJFXNhNm4FvjWTUdZZYJ2QjF49w" type="text/javascript"></script>
 <script language="Javascript" type="text/javascript">
    //<![CDATA[

    google.load("search", "1");

    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

	options = new google.search.SearcherOptions();
        //EXPAND_MODE_PARTIAL / EXPAND_MODE_OPEN /EXPAND_MODE_CLOSED
	options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); 

	// set result to root element instead of default 'searchControl'
	// element provided at the time of draw()
	//options.setRoot(document.getElementById("root")); 

      	// Two searcher - web search and Imagesearch
      	var siteSearch = new google.search.WebSearch();
      	var siteImgsearch   = new google.search.ImageSearch();

	siteSearch.setUserDefinedLabel("Web Scripting");
	siteSearch.setSiteRestriction("satya-weblog.com");
	searchControl.addSearcher(siteSearch, options);

        siteImgsearch.setSiteRestriction("satya-weblog.com");
	searchControl.addSearcher(siteImgsearch, options);

        //SMALL_RESULTSET, LARGE_RESULTSET
	searchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        siteImgsearch.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

      // Tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // Execute an inital search
      searchControl.execute('php'); // can be blank

    }

    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>

HTML code:

  
  <div id="searchcontrol">Loading...</div>

    <hr/>
    Works with options.setRoot(). Check above.
    <div id="root" style="width:500px;border:1px solid red">test</div>

Link to Working Example of Ajax Search API

Ajax Search Documentation here.

Here is my another article about Ajax Search API: Setting Site Restriction to Google Ajax Search API

Google Ajax Search API Screenshots:

Expand Mode:

Linear Mode:

Tabbed Mode:

Here is a small tool/application for you to play with. It is based on Google Ajax Search API.