Apax Software Blog - AJAX Google Search and jQuery Mash-up

Site search is becoming an expected functionality for any website. Fortunately, Google provides an API that makes adding site search trivial. With a few lines of code you can take advantage of Google and provide search results directly on your site.

The question then becomes, how do you display the results? By combining jQuery with the Google search you can quickly create a dynamic and user friendly search system for your site.

In this solution, we will be adding the Google site search directly to a pop up box on the page. This allows the user to search for content on your site without ever leaving the site.

The first step is displaying a dialog box using jQuery, and the jQuery UI (both are available at http://jquery.com/). The following code allows a link on a page to a dialog box:

    $(function(){
        // Dialog Box			
        $('#dioalog_box').dialog({
            autoOpen: false,
            width: 600,
            position: 'top',
            resizable: false,
            draggable: false
        });


        $('#open_dialog_link').click(function(){
            $('#dialog_box').dialog('open');
         });

    });

“dialog_box” is a div layer on the html page that becomes the popup dialog. The .dialog method in jQuery UI, sets up the div layer to become the popup. After the div layer has been setup, the .dialog('open') just needs to be called to display the dialog box.

“open_dialog_link” is the ID of a link on the web page that is clicked to display the dialog box. The .click simply provides us with the ability to open the dialog whenever the button is clicked.

Now that we have the dialog box opening, we just need to add the Google search to the dialog box. You can get the code for the Google AJAX search API at: http://www.google.com/jsapi?key=yourkeyhere, where you replace “yourkeyhere” with a Google Search API key that you can obtain from http://code.google.com/apis/ajaxsearch/signup.html.

Below is an example of the code to setup the Google search control on your website:

// Create a search control
        var searchControl = new google.search.SearchControl();

        // Add in a full set of searchers
        var siteSearch = new google.search.WebSearch();
    
        // Set the Search Control to get the most number of results
        searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);  
        var searchOptions = new google.search.SearcherOptions();
        searchOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
        siteSearch.setUserDefinedLabel("");
        siteSearch.setSiteRestriction('www.yourdomain.com');
        searchControl.addSearcher(siteSearch, searchOptions);

        // tell the searcher to draw itself and tell it where to attach
        searchControl.draw(document.getElementById('dialog_box'));

This code sets up the search, and draws the search control to the web page. SiteSearch.setSiteRestriction('www.yourdomain.com') causes this control to be a site search. If we just omitted this line it would search all of Google. searchControl.draw(document.getElementById('dialog_box')); actually draws the Google Search control to the pop up dialog.

Make sure you add the above code inside a jQuery OnReady function, so the control is drawn after the page has loaded:

$(function(){
		// Google search code here
	}

One nice thing to note about this is that it uses the jQuery UI. This allows you to use jQuery's themeroller to design the interface of the dialog box to fit the look and feel of the rest of the site.

A packaged version of this code can be found below. If you have any questions, or need help implementing, or modifying this solution please feel free to contact us.

Matt Smith VP Operations Apax Software Development