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:

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:

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;
// tell the searcher to draw itself in linear mode
drawOptions.setDrawMode(; //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. - 8 results - 4 results - 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 ''.

var searchControl = new;

Expand all results or expand only partial:

options = new;

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

options = new;

Working code of Google AJAX Search API:

JavaScript code:

<script src="" type="text/javascript"></script>
 <script language="Javascript" type="text/javascript">
    google.load("search", "1");
    function OnLoad() {
      // Create a search control
      var searchControl = new;
	options = new;
	// set result to root element instead of default 'searchControl'
	// element provided at the time of draw()
      	// Two searcher - web search and Imagesearch
      	var siteSearch = new;
      	var siteImgsearch   = new;
	siteSearch.setUserDefinedLabel("Web Scripting");
	searchControl.addSearcher(siteSearch, options);
	searchControl.addSearcher(siteImgsearch, options);
      // Tell the searcher to draw itself and tell it where to attach
      // Execute an inital search
      searchControl.execute('php'); // can be blank

HTML code:

  <div id="searchcontrol">Loading...</div>
    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:
Expand Mode

Linear Mode:
Google AJAX Search API - Linear Mode

Tabbed Mode:

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

  • # 1 - by sandeep

    i find your description of google ajax api very useful.. could you let me know if the results could be opened in a new page with url like

  • # 3 - by sandeep

    hi satya,
    thanks for quick reply.
    actually i meant something else . i want that if we search , can the search results should show on another page rather than on the same page. eg you can see the search results on this site

  • # 4 - by Web Development

    The way the information has been presented here is really very good.

Comments are open for an year period. Please, write here on Facebook page.