Google Ajax Search API Srikanth TSS

Google AJAX Search API Lets you put Google Search in your web pages with JavaScript. Embed a simple, dynamic search box and display search results in your own web pages.

Uses Provides simple web objects that perform inline searches Build powerful web apps on top of Google search

How to use it? Include the URL for the Google AJAX Search API javascript library ( ds.js&v=1.0&key=ABCDEFG). This library includes objects and symbols for placing Google Search API results on your pages.

Sign up for the Google AJAX Search API A single AJAX Search API key is valid within a single directory on your web server, including any subdirectories. Signing up the URL will create a key usable within all URLs in that directory.

What else do I need? You must have a Google Account to obtain a Google API key, and your API key is tied directly to your Google Account.Google Account You can generate multiple API keys for your account if you have multiple web sites.

API Overview The Google AJAX Search API is made up of several classes of objects: GSearchControl - This class provides the user interface and coordination over a number of searcher objects, where each searcher object is designed to perform searches and return a specific class of results (Web Search, Local Search, etc.). GSearch - This base class is the class from which all "searchers" inherit. It defines the interface that all searcher services must implement. GResult - This base class encapsulates the search results produced by the searcher objects. GsearchOptions - This class configures the behavior of searcher objects when added to a search control.

Example function OnLoad() { var searchControl = new GSearchControl(); searchControl.addSearcher(new GwebSearch()); searchControl.addSearcher(new GvideoSearch()); searchControl.addSearcher(new GblogSearch()); searchControl.addSearcher(new GnewsSearch()); searchControl.addSearcher(new GbookSearch());

Example (contd.) var localSearch = new GlocalSearch(); searchControl.addSearcher(localSearch); localSearch.setCenterPoint("New York, NY"); searchControl.draw(document.getElementById("searchcontrol")) ; searchControl.execute(“Google API"); } GSearch.setOnLoadCallback(OnLoad); Loading

HTML in detail Main object is an instance of GSearchControl, GSearchControl coordinates search across a collection of search services Search services are child objects GlocalSearch, GwebSearch GvideoSearch, GblogSearch GnewsSearch, and GbookSearch addSearcher() method – Adds Children to the object.

HTML in detail (contd.) draw() - Search control displays itself within the web page; Also binds the search control onto your page. By default, a search control draws in a "linear" layout; Can also be a "tabbed" layout. Allows decoupling "search form" from search results. Search form in the sidebar ; Results stacked in the center of the page.

HTML in detail (contd.) User initiates search by entering search terms into the search control's text field. Automatically begins parallel search across requested Google services. Initiate a search by calling execute() method, passing an argument.

Browser Compatibility The Google AJAX Search API currently support Firefox 1.5+, IE 6, and Safari, and Opera 9+.

GSearcherControl Draw Modes var drawOptions = new GdrawOptions(); drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR); searchControl.draw(element, drawOptions); GdrawOptions object - Controls search results to be displayed in different draw modes using setDrawMode() method GSearchControl.DRAW_MODE_LINEAR GSearchControl.DRAW_MODE_TABBED

GSearcherControl Draw Modes (contd.) Ability to decouple the “search form” from “search results” var drawOptions = new GdrawOptions(); drawOptions.setSearchFormRoot(document.getElementById("sForm")); searchControl.draw(element, drawOptions); setSearchFormRoot() - This method accepts a DOM element which will act as the container for the search form.

Searcher Objects - setExpandMode var options = new GsearcherOptions(); options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN); searchControl.addSearcher(new GwebSearch(), options); addSearcher() – This method determines which search services the search control operates Takes two arguments, One - specifies the service object Two - specifying options for the service Argument One – GlocalSearch, GwebSearch, GvideoSearch, GblogSearch, GnewsSearch,GbookSearch

Searcher Objects – setExpandMode (contd.) Argument Two – Controls each service's default expansion mode GsearchControl.EXPAND_MODE_OPEN Results are displayed as fully as possible within the object GSearchControl.EXPAND_MODE_CLOSED Results are hidden from view, unless opened through use of a UI element (e.g. an arrow). GSearchControl.EXPAND_MODE_PARTIAL Results are shown as a subset of the "open" expansion mode

Searcher Objects - setRoot var options = new GsearcherOptions(); options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN); options.setRoot(document.getElementById(“localform")); searchControl.addSearcher(new GlocalSearch(), options); When it is desirable to project search results for a given service (here local search) into a different location on the web page.

Storing a Search Result Google AJAX Search API is designed to store results to another application. setOnKeepCallback() – Using this method, applications specify an object and method that is called whenever a user clicks "Copy" link below the result.

Storing a Search Result (contd.) searchControl.setOnKeepCallback(this, MyKeepHandler); function MyKeepHandler(Gresult) { var node = Gresult.html.cloneNode(true); var savedResults = document.getElementById(“SavedResults"); savedResults.appendChild(node); } When a user clicks the link, Registered callback receives a GResult instance representing the search result. Search results object contains searcher specific properties, as well as a uniform html property that contains an HTML element representing the entire search result. Clone the html node and attach it to a node in your application's DOM.

Setting Site Restrictions To restrict a web search, news search, or blog search to a specific site or blog. To set your own custom label on a section of search results To style a section of results differently. Supported by.setUserDefinedLabel().setUserDefinedClassSuffix().setSiteRestriction() Example. Return results from amazon.com "Amazon.com" as the search section label Apply custom css styling to this section (bold title, orange keeper button, etc.).

Setting Site Restrictions (contd.).gsc-resultsRoot-siteSearch.gsc-keeper { background-image : url('../../css/orange_check.gif'); font-weight : bold; }.gsc-resultsRoot-siteSearch.gsc-title { font-weight : bold; } var searchControl = new GSearchControl(); var siteSearch = new GwebSearch(); siteSearch.setUserDefinedLabel("Amazon.com"); siteSearch.setUserDefinedClassSuffix("siteSearch"); siteSearch.setSiteRestriction("amazon.com"); searchControl.addSearcher(siteSearch);

Reference /documentation/reference.html /documentation/reference.html

Thank you!