English | Site Directory

Google AJAX Search API

Example Code

Table of Contents


  1. The Basics
  2. Search Form and Result Placement Control
  3. Local Search and Mapping
  4. Site Restriction and Custom Search Engines
  5. Search Result Clipping
  6. AJAX Search in a Blog
  7. Additional Code Samples

The Basics

This section provides samples that teach the basic operation and control of the core search control.

  • Hello World
    This sample is the "hello world" of the AJAX Search API. The sample demonstrates how to create a basic search control and populate it with a number of searchers.
  • Tabbed Display Mode
    This sample is similar to the "hello world" sample, but instead of drawing the search control with each section stacked atop each other, the search control is configured to use tabs to switch from searcher to searcher. This is done using the setDrawMode() method of the GdrawOptions object.
  • Number of Search Results
    This sample demonstrates how to set the number of search results globally for an entire search control, as well as locally, per searcher. This is done using the setResultSetSize() method of the GSearchControl object, or the same method on an individual searcher object.
  • Expansion Mode
    This sample demonstrates how to control the expansion mode of an individual searcher within a search control. This is done using the setExpandMode() method of the GsearcherOptions object.
  • Raw Search ObjectsNew!
    In some cases, you will want to use search objects outside the context of the GSearchControl. This sample demonstrates how to do exactly this. You will see how to initiate a search, respond to search completion, and generate an HTML representation of a search result.

Search Form and Placement Control

This section provides samples that demonstrate the use of the search control when placement of result sections or the search form itself is important. For instance, in many blogs, it is common to place the search form in the side bar while placing the search results in the center section of the page. Examples in this section demonstrate how to do this.

  • Search Form Placement Control
    This sample demonstrates how to control the placement of the search form using the setSearchFormRoot() method of the GdrawOptions object. This is a common technique used in blogs when trying to place the search form in the sidebar while placing the search results in the main section of the blog.
  • Search Result Placement Control
    This sample is similar to the previous, but here, we demonstrate how to control the placement of an individual section of search results. This is done using the setRoot() method of the GsearcherOptions object.

Local Search and Mapping

This section provides samples that demonstrate the use of the GlocalSearch object. The main things demonstrated in these samples include setting the center point of the object to scope search results to a particular region, as well as how to use the object as a source of results to be plotted on a Google Map.

  • Center Point Control
    This sample demonstrates how to control the center point associated with a local search object, including how to do this using a string, a GMap, a GMap2, a GPoint, and a GLatLng. Setting the center point is done using the setCenterPoint() method of the GlocalSearch object.
  • AJAX Search + Google Maps
    This sample demonstrates how to take a local search result and plot it on a Google Map. The key concept here is to use the .lat and .lng properties to create a GLatLng/GMarker as well as using the .html property in order to specify the html of an info window. In addition to these basics, this sample also demonstrates the use of a searcher outside of a search control, as well as the use of the GSearchForm object.
  • Driving DirectionsNew!
    Each local search result contains two sets of driving directions links which are made visible using CSS rules. The default directions link provides directions from the current center point of the search to the search result. As an alternate, your application can make visible links that show directions to/from a user selected location to/from the current search result. This sample demonstrates how your application can control which type of driving directions is displayed.
  • Static Map ImagesNew!
    Each local search result includes a staticMapUrl property that resolves to a map image that visually represents the local search result on a map. Using this property is fast and efficient when all you want to do provide a small thumbnail representation of the search result. The sample demonstrates the use of this property and related support methods.

Site Restriction and Custom Search Engines

This section provides samples that demonstrate the use of the setSiteRestriction() method of a searcher to scope a set of search results to a site, or to a custom search engine. The GwebSearch, GblogSearch, and GnewsSearch searchers all support this basic method, but only GwebSearch supports scoping to a custom search engine.

  • Site Restricted Search
    This sample demonstrates how to use the setSiteRestriction() method of the GwebSearch, GblogSearch, and GnewsSearch objects. When doing site restricted search, it is often a good idea to specify a customized label for the search result section header, and in some cases, perform some custom styling of the search results. Both of these functions are supported by using the setUserDefinedLabel() and setUserDefinedClassSuffix() methods.
  • Custom Search Engines
    This sample builds on the sample above by making heavy use of a product review custom search engine. Note the various calls to setSiteRestriction() all being made using a custom search engine id. The sample includes some other concepts that are not related to site restriction. These include the use of the GSearchForm object that is used to drive multiple search controls and the use of custom CSS directives that restyle portions of the search control and results.
  • Custom Search Engine Refinements
    This sample builds on the sample above by introducing custom search engine refinements. You will note in the calls to setSiteRestriction() for the right hand side searcher, the code is using the opt_refinement argument to further restrict the search results within the custom search engine.
  • Linked Custom Search EnginesNew!
    This sample demonstrates the latest addition to Custom Search Engines, the Linked Custom Search Engine. You will note that we use an object for site and in the crefUrl property we supply the url of a Custom Search Engine definition file.

Search Result Clipping

This section provides samples that demonstrate the use of search result clipping. This is a feature that allows users to click on a link below a search result and hand that result to the application. In this section, we include a few samples that demonstrate this feature.

  • Basic Clipping
    This sample demonstrates the basics of clipping. The key method thats used in this sample is the setOnKeepHandler() method of the search control object. This causes a clickable link to show up underneath each search result which, when clicked, calls the target handler. In this sample, the target handle makes a deep clone of the result's .html property and then attaches this onto the current page.
  • Blog Comment Form
    This sample demonstrates the same methods as show in the previous sample, but in this case, the sample demonstrates the concept of clipping in the environment of a blog style comment form. The idea is to demonstrate how user generated content (like blog posts and comments) can be enhanced with specific, user selected search results.
  • Phone List
    This sample builds on the basics of clipping by demonstrating how to use result properties other than just the .html property. In this case, each time a user clips a search result, a "row" is added to a spreadsheet and the columns are formed using the .title, .streetAddress, etc. properties. The sample also demonstrates plotting a "clipped" search result on a map, something that was demonstrated in previous sections as well.

AJAX Search in a Blog

AJAX Search is a very popular addition to blogs. We have built two sample blogs that demonstrate the use of AJAX Search in both TypePad and in Blogger.

  • AJAX Search in Blogger
    This sample demonstrates several AJAX Search components in the context of a Blogger based blog. The complex components (the video strip on the left side, the video search control and map search controls on the right side) are built using the techniques demonstrated by the samples on this page and are available as solutions (map search, video search, and video bar) and wizards. The search form in the upper right is something that you have seen before. This is constructed using a normal tabbed search control in the center column with the search form's position placed in the sidebar using setSearchFormRoot().
  • AJAX Search in TypePad
    This sample is similar to the previous, only this time the blogging host is TypePad which has a slightly different template structure.

Additional Code Samples

In this section, we provide links to more advanced code samples that merge several of the concepts demonstrated above into a single sample. Use these samples for ideas, and feel free to borrow liberally.

  • Wish List
    This is a complex search result clipping sample which demonstrates clipping with results going into a moving on-page container and conditional styling of search results.
  • Video Clipping
    This is another complex clipping sample where we demonstrate clipping of video search results where the clipped video result is styled differently than the result in the search control. Also note that in this sample the ability to clip is hidden until you click on the "leave me a note" link. This hiding is accomplished using basic CSS techniques.
  • Local + Web + Maps Mashup
    This is an even more complex clipping sample which demonstrates a combination of local search, web search, clipping, and Google Maps...