Google Search with Ajax

Doing more things with the API

We’ve all used Google to search the web. What if we could add Ajax to the web search operation? Google Ajax Search API does just that – could this facilitate searching?

Ajax is a web technique which refreshes content on a web page without reposting the web page and the Google Ajax Search API provides a search control and various searchers that can specialise a web search.

For example, using the Google Local Search service the web search may be localized to a specified region. Throw in a Google map and who needs to ask for directions? And the Google Blog search service is used to search only blogs.

Preliminary Setup

Before we can start using the Google Ajax Search API, we need to create a web application and register the URL of the web application with Google Ajax Search.

First download and install a web server to create and run the Google search application. We’ll use JDeveloper 10.1.3.2 with the embedded OC4J server to create our Google Ajax search web application.

Create a JDeveloper application and project with File>New>General>Application. Add a JSP, ajaxsearch.jsp, to the JDeveloper project with File>New>Web Tier>JSP>JSP. Select the default options in the Create JSP Wizard.

The directory structure of the new Google Search application is shown in Figure 1.

To obtain the URL for the ajaxsearch.jsp JSP right-click on the JSP and select Run. The URL for the ajaxsearch.jsp JSP is http://142.179.34.223:8990/GoogleAjaxSearch-GoogleAjaxSearch-context-root.

Next, we’ll register the URL with Google Ajax Search. Open the Sign up for the Google AJAX Search API page and specify the web application URL in the My web site URL field, and click on the Generate API Key button.

Sign in to the Google account (if not already signed in). A Google Ajax Search API key gets generated that may be used only for the web application for which the URL is registered. Similarly, obtain a Google Maps API key from the URL http://www.google.com/apis/maps/signup.html here. Save a copy of the Google Ajax Search API key and the Google Maps API key for use in the Google Ajax search application.

Overview of Google Ajax Search API

The main class of the Google Ajax search API is GSearchControl, which provides the user interface for a search performs the search using the different searcher objects. Some of the commonly used methods of the GSearchControl class are discussed in the following table.

Method

Description

addSearcher

Adds a searcher to the search control object.

draw

Binds the search control object to the HTML container. The search results are displayed in a specified DOM element.

execute

Initiates a search across the different searchers specified in the search control using a specified search term.

setResultSetSize

Sets the result set size. Specifies the number of results in the result set. Values that may be specified are GSearch.LARGE_RESULTSET, which corresponds to 8 results, and GSearch.SMALL_RESULTSET, which corresponds to 4 results.

clearAllResults

Clears all the search results from the search control.

setLinkTarget

Specifies the link target for links embedded in search results. Default value is GSearch.LINK_TARGET_BLANK, which opens a link in a new window.

setSearchCompleteCallback

Specifies a callback method that is invoked when the search is complete.

setSearchStartingCallback

Specifies a callback method that is invoked when the search begins.

The search services are provided by “searchers”, which are represented by the GSearch class. The different searchers that are provided are discussed in following table.

Searcher

Description

GwebSearch

Provides the Google web search service. The search may be restricted to a specific web site, such as Expedia.com, using the setSiteRestriction method.

GlocalSearch

Provides the local search service. The location for the search may be specified using GPoint, GMap or a string.

GvideoSearch

Provides the Google Video Search service.

GblogSearch

Provides the Google Blog Search Service.

GnewsSearch

Provides the Google News Service.

GbookSearch

Provides the Google Book Search service.

Some of the methods that are common to all searchers are setResultSetSize, clearResults, execute(query), setSearchCompleteCallback, setUserDefinedLabel, and setLinkTarget.

The setResultSetSize method sets the number of results returned by a searcher. The clearResults method clears the search results and resets the searcher. The setSearchCompleteCallback method registers a callback method on the searcher to be invoked when the search completes. The setUserDefinedLabel method sets a label for search result section, which replaces the default label “Local”, “Web”, or “Blog”. The setLinkTarget method specifies the link target for links in the search results. The default is to open the links a new browser window.

The search control displays the query results for the different searchers added to a search control object in one of the two draw modes: linear or tabbed. The linear draw mode is the default and is shown below in Figure 3.

The tabbed draw mode is shown below in Figure 4.

The search results may be displayed in one of the three expansion modes: open, closed, or partial. In the open expansion mode the search results are displayed fully. In the closed mode the search results are not displayed until a UI element such as an arrow is clicked. The partial search result displays partial results. The default expansion mode is partial.

Creating a Google Ajax Search Application

In this section, we’ll create a Google Ajax Search application using the Google Local search service. To the ajaxsearch.jsp add the Google Ajax Search API JavaScript library. Specify the Google Ajax Search API key in the src attribute for the script tag.

Create a JavaScript function, onLoad(), to add a search control and search service. In the onLoad() function, create a search control object:

var searchControl = new GSearchControl();

Set the result set size to GSearch.LARGE_RESULTSET, which typically returns 8 results:

searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);

Create a GlocalSearch searcher object for the Google Local search service:

var localSearch = new GlocalSearch();

Add the searcher to the search control:

searchControl.addSearcher(localSearch);

Set the location for which the local search is to be performed with the setCenterPoint(location) method:

localSearch.setCenterPoint("London UK");

Create a GdrawOptions object to specify the draw options for the search results:

var drawOptions = new GdrawOptions();

Set the draw mode to linear:

drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);

Specify a div element to display the search control results:

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

Activate the search control and display the results in the searchcontrol div:

searchControl.draw(document.getElementById("searchcontrol"));

Register the onLoad() function with the document using the setOnLoadCallback static method of the GSearch class. When the document has completed loading the onLoad() function will be invoked:

The Google Local search service page gets displayed. Specify a search term, for example “Auto Repair”, and click on Search. The Google Local search service searches only in the location specified by the setCenterPoint method of the GlocalSearch object.

The search result gets displayed in expansion mode PARTIAL.

To display all the search results click on show all results.

Next, we’ll add a Google Map to the Google Ajax Search. In the ajaxsearch.jsp JSP, we must include the Google Maps JavaScript library:

The complete application ajaxsearch.jsp for the Google Ajax search including a Google map is available in the resources zip file here. Run the Google Ajax Search/Map application similarly to the earlier application and a search form with a Google map is displayed.

Specify a search term, “Swiss Restaurant” for example, and click on the Search button:

The search results get displayed with corresponding markers on the Google map:

The Google Ajax Search API and the Google Maps API do therefore appear to facilitate Google web search, in answer to the question posed at the start of this tutorial.

For debugging, use a JavaScript debugger. For IE, use the Microsoft Script Debugger; but browser debugging is sometimes an issue, as some browsers do not have a debugging environment available (see also here). For further online information on Google Ajax search, refer to http://code.google.com/apis/ajaxsearch/documentation/ here.