October 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Introducing the Google AJAX APIs

  • July 30, 2007
  • By Chris Schalk
  • Send Email »
  • More Articles »

In reviewing this code example, you first note that an external JavaScript file, uds.js, is downloaded into the page. The uds.js file provides some of the behind-the-scenes plumbing for enabling the search mechanism into your page. Notice that, to download this file, an API key is passed as an argument to the host providing the JavaScript file.

Note: In the above example, YOUR-KEY would be replaced with the one generated for you.

In addition to including the core uds.js file into the page, an additional bit of custom JavaScript is needed to specify some specifics such as what type of search mechanism and some additional settings such as how to render itself on the page.

Notice the first line of code:

var searchControl = new GSearchControl();

It first creates a new base GSearchControl class. The next bit of code adds specific searcher options to the base control. As you can see, searchers for Local, Web, Video, Blog, News, and Book are added to the search control by using:

var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());

And finally, to execute an initial search as the page is loaded, the line:

GSearch.setOnLoadCallback(onLoad);

is used to execute the "onLoad( )" function that both initializes the search controls and executes an initial search using:

searchControl.execute("VW Beetle");

This results in the page rendering with an initial set of search results.

AJAX Search - Hello world

Figure 1: A HelloWorld AJAX Search

Notice the search results are nicely formatted with collapsible sections. There are also clickable icons that allow you to alter the appearance and behavior of the results.

AJAX Search - Hello world

Figure 2: AJAX Search customizable formatted results

The results number icon, , allows you to define how many results you want displayed ranging from 1, 4 to 8. The search options icon, , allows you to specify further search or reporting options such as changing the local search location, or how to sort the results, such as by date. The "X" to the right of the main search button allows for cancelling a search before it completes.





Page 2 of 6



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel