Implementing Google AJAX Search

As a member of the Google AJAX Search API Google Group I have seen multiple requests for a tutorial for non-developers who want to implement this on their site or blog. So, here goes.

Step 1: Get yourself an API key here.

Step 2: On your blog or website, add the following line in between the

< head>...< /head>

sections of your website:

(Note: If you are using a hosted wordpress account, you’ll have to add a page and then add the code since you do not have access to template code)

< script src="http://www.google.com/uds/api?file=uds.js&v=0.1&key=insert
your Google API Key" type="text/javascript">

(Note: Replace the text ‘insert your Google API Key’ with the API key provided to you by Google when you sign up)

Step 3: Add the following script (preferrably in the

< head>... < /head>

if you have access, but elsewhere will work) to your site:

< script language="Javascript" type="text/javascript">
    //< ![CDATA[

    function OnLoad() {

      // Create a search control
      var searchControl = new GSearchControl();

      // add search controls in order you want them to appear
      searchControl.addSearcher(new GblogSearch());
      searchControl.addSearcher(new GwebSearch());

      // add local search option
      var localSearch = new GlocalSearch();
      searchControl.addSearcher(localSearch);

      // set starting point for local search
      localSearch.setCenterPoint("Des Moines, IA");

      // video search
      searchControl.addSearcher(new GvideoSearch());

     //set size of dataset you want returned
     searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);

     //search options
     var searchOptions = new GsearcherOptions();
     searchOptions.setExpandMode(GSearchControl.EXPAND_MODE_PARTIAL);

     // draw options determine how results are displayed
     var drawOptions = new GdrawOptions();
     drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

     // Tell the searcher to draw itself and tell it where to attach
     searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

     // Execute an inital search (optional - you can remove this line if you dont want it to auto search)
     searchControl.execute("Get A New Browser");
    }

    window.onload = OnLoad;

    //]]>

The above script can be modified to suit your needs. For example if you do not want to implement video search, simply remove the line

searchControl.addSearcher(new GvideoSearch());

from your script.

Step 3: Add a div in your template or page for the search control to access. In the case of the code above, you want to add

< div id="searchcontrol" />

to your markup. Put this where you want the search box and results to appear. Position it accordingly.

Step 4: Styling. Here is where you make the textbox, button, and results appear like you want them to. The easiest way to do this is to use Google’s stylesheet provided if you look through their samples deep enough. The easiest way is to paste the following code below the script code above:

< style type="text/css">
	@import url(http://www.google.com/uds/css/gsearch.css);
< /style>

Now, if you want a custom style, you can download the linked stylesheet above and edit it. There are a lot of good comments in the stylesheet markup that will guide you through any customizations.

If you have any questions, leave us a comment here and we’ll get back to you to help you with what you need to get this up and running on your site.

Check out my first implementation here, and get a sneak peak at our new design.

Get more information using Google’s reference.

Or, join the Group.

tags: google, search, blog, ajax, javascript, web development

Note: I apologize for the code formatting — I am having issues with wordpress and the pre tags. So, html elements have an extra space in them so they render as text. Sorry for any inconvenience.

Related posts:

1. Google Launches New Search Index: Caffeine via googleblog.blogspot.com “So why did we build a new search...
2. Google Reader Adds Search If you hadn’t noticed in your Google Reader today –...
3. Google Music Search and Google Reviews So I was searching on Google for Norah Jones, my...
4. Search Google Docs with Spotlight Precipitate is an application from the Google Mac team that...
5. Google Maps API Gets Spatial Search via techcrunch.com Meaning you can search for things on a...