google ajax search api l.
Skip this Video
Loading SlideShow in 5 Seconds..
Google Ajax Search API PowerPoint Presentation
Download Presentation
Google Ajax Search API

Loading in 2 Seconds...

play fullscreen
1 / 24

Google Ajax Search API - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Google Ajax Search API' - Thomas

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
google ajax search api2
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.
  • Provides simple web objects that perform inline searches
  • Build powerful web apps on top of Google search
how to use it
How to use it?
  • Include the URL for the Google AJAX Search API javascript library (
  • This library includes objects and symbols for placing Google Search API results on your pages.
sign up for the google ajax search api
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
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.
  • You can generate multiple API keys for your account if you have multiple web sites.
api overview
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.
  • <script src = ";v=1.0;key=ABCDEF" type="text/javascript"></script>
  • <script language="Javascript" type="text/javascript">
  • 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
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);
  • </script> </head>
  • <body> <div id="searchcontrol">Loading</div> </body>
  • </html>
html in detail
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
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 contd12
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
Browser Compatibility
  • The Google AJAX Search API currently support Firefox 1.5+, IE 6, and Safari, and Opera 9+.
gsearchercontrol draw modes
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
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
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
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
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
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
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
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
    • "" as the search section label
    • Apply custom css styling to this section (bold title, orange keeper button, etc.).
setting site restrictions contd
Setting Site Restrictions (contd.)
  • <style type="text/css">
  • .gsc-resultsRoot-siteSearch .gsc-keeper { background-image : url('../../css/orange_check.gif'); font-weight : bold; }
  • .gsc-resultsRoot-siteSearch .gsc-title { font-weight : bold; }
  • </style>
  • var searchControl = new GSearchControl();
  • var siteSearch = new GwebSearch();
  • siteSearch.setUserDefinedLabel("");
  • siteSearch.setUserDefinedClassSuffix("siteSearch");
  • siteSearch.setSiteRestriction("");
  • searchControl.addSearcher(siteSearch);