1 / 24

Google Ajax Search API

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

Thomas
Download Presentation

Google Ajax Search API

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Google Ajax Search API Srikanth TSS

  2. 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.

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

  4. How to use it? • Include the URL for the Google AJAX Search API javascript library (http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABCDEFG). • This library includes objects and symbols for placing Google Search API results on your pages.

  5. 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 http://www.cse.sc.edu/~thirumas/ will create a key usable within all URLs in that directory.

  6. 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.

  7. 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.

  8. Example • <script src = "http://www.google.com/uds/api?file=uds.js&amp;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());

  9. 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>

  10. 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.

  11. 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.

  12. 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.

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

  14. 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

  15. 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.

  16. 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

  17. 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

  18. 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.

  19. 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.

  20. 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.

  21. 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.).

  22. 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("Amazon.com"); • siteSearch.setUserDefinedClassSuffix("siteSearch"); • siteSearch.setSiteRestriction("amazon.com"); • searchControl.addSearcher(siteSearch);

  23. Reference • http://code.google.com/apis/ajaxsearch/documentation/reference.html

  24. Thank you!

More Related