Google Ajax Search API

Showing Results in Tabs

By default, the search results are drawn in a linear (vertical) fashion, one after the other, in the order the object were instantiated. That’s the way the results are drawn in Figure 4 and Figure 5, for example. You can also draw results using tabs, which hides the results until you click on the tab. So your results are a little more tidy, a little more compact. Figure 8 shows you what tabs look like. In it, there is a tab for each of the searchers—Web, Local, Blog, Video, and News. The Video tab was clicked for the screenshot below.

Figure 8. Results in tabbed form

The tabs appear compliments of the GdrawOptions class and a call to its method setDrawMode, plus adding a second argument to the GSearchControl draw method. Example 6 shows how you would use this code to get tabs.

Example 6. doSearch rewritten for tabs

<script language="Javascript" type="text/javascript">

function doSearch() {

  // Instantiate control, web search service
  var search = new GSearchControl();
  var local = new GlocalSearch();
  var opts = new GdrawOptions();

  // Add a web search
  search.addSearcher( new GwebSearch() );
  search.addSearcher( local );
  search.addSearcher( new GblogSearch() );
  search.addSearcher( new GvideoSearch() );
  search.addSearcher( new GnewsSearch() );

  // Draw tabbed results
  opts.setDrawMode( GSearchControl.DRAW_MODE_TABBED ); // Change local search center point local.setCenterPoint( ...