Google AJAX Search API - Example Code

Table of Contents
The Basics
Search Form and Result Placement Control
Local Search and Mapping
Site Restriction and Custom Search Engines
Search Result Clipping
AJAX Search in a Blog
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 Objects
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.
AJAX Search + Google Maps
This sample demonstrates how to take a local search result and plot it on a Google Map.
Driving Directions
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 Images
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 Engines
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.

Table of Contents
The Basics
Search Form and Result Placement Control
Local Search and Mapping
Site Restriction and Custom Search Engines
Search Result Clipping
AJAX Search in a Blog
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 Objects
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.
AJAX Search + Google Maps
This sample demonstrates how to take a local search result and plot it on a Google Map.
Driving Directions
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 Images
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 Engines
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, in addition to Blogger's new built-in Search Gadget.
Blogger Search Gadget
This gadget accesses a Custom Search Engine (CSE) that is created automatically for your blog and provides search results inline, with the look and feel of your blog. You can get all this with just a few clicks from the Blogger control panel.
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...
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, in addition to Blogger's new built-in Search Gadget.
Blogger Search Gadget
This gadget accesses a Custom Search Engine (CSE) that is created automatically for your blog and provides search results inline, with the look and feel of your blog. You can get all this with just a few clicks from the Blogger control panel.
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...