This article is more than 1 year old
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:
GSearch.setOnLoadCallback(OnLoad);
The ajaxsearch.jsp is listed below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ page contentType="text/html;charset=windows-1252"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google AJAX Search</title> <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/> <script src="https://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAItAEL-H-GuOHsDfD7MxmlhT7mv 5WRGU_VmTV_U7i6gk-knMDhxQ5YomdhRDg3KUS6GrAGkfOejZoCw" type="text/javascript"></script> <script language="Javascript" type="text/javascript"> function OnLoad() { var searchControl = new GSearchControl(); searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); var localSearch = new GlocalSearch(); searchControl.addSearcher(localSearch); localSearch.setCenterPoint("London UK"); var drawOptions = new GdrawOptions(); drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR); searchControl.draw(document.getElementById("searchcontrol",drawOptions)); } GSearch.setOnLoadCallback(OnLoad); </script> </head> <body><div id="searchcontrol">Loading</div></body> </html>
Right-click on the ajaxsearch.jsp and select Run to run the JSP.
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:
<script src="https://maps.google.com/maps?file=api&v=2&key=ABQIAAAAItAEL-H-GuOHsDfD7MxmlhQ6c Eu3Q11txNOPL7YQRWHJy8OKPxQE9Bi7QBtzNgr-yh4YZk2_RBO8DQ" type="text/javascript"></script>
We then create a marker to locate locations on the Google map:
var gSmallIcon = new GIcon(); gSmallIcon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
On the Google web search page we create divs for the search form, the search results, and the Google map:
<body> <h1>Google Local Search</h1> <p>Search for locations on the map below and save them to your list.</p> <div id="placelist"> <div id="search"> <div id="searchform"></div> </div> <div id="results"> <div id="searchwell"></div> </div> <div id="map"></div> <div id="selected"></div> </div> </body>
Create a search form with the GSearchForm
class:
gSearchForm = new GSearchForm(false, document.getElementById("searchform"));
Register a method with the search form using the setOnSubmitCallback(object, method)
method to be invoked when the form is submitted:
gSearchForm.setOnSubmitCallback(null, CaptureForm);
Now, set the focus on the input:
gSearchForm.input.focus();
Initialize a Google Map and set the center location for the map:
gMap = new GMap(document.getElementById("map")); gMap.addControl(new GSmallMapControl()); gMap.addControl(new GMapTypeControl()); gMap.setCenter(new GLatLng(51.5, -0.1167), 13);
Initialize the Google local search object. Specify the center location for the local searcher and register a callback method to be invoked when the search completes:
gLocalSearch = new GlocalSearch(); gLocalSearch.setCenterPoint(gMap); gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
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.