Apax Software Blog

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

apax_googlesearch.zip (61.76 KB)

Learning to develop iPhone applications can be a frightening undertaking. However, if you let it, it can be a very enjoyable experience. Assuming you are, like me, a PC user first, you will be overwhelmed by the small differences between developing on the PC platform, and developing on the MAC platform. Heck, just using the MAC operating system can be a challenge at first! Eventually, though, you should discover that the new environment is fun.

The key here is to approach the MAC OS, also known as Leopard (or lynx, or wildcat, or whatever cat they are using these days), without focusing on the differences between it and Windows. These little differences can really get on your nerves if you let them. But let’s face it, Windows is not exactly a perfect platform…I’m not saying that Leopard IS perfect, but if you don’t get caught up in the small differences, you can see that it really does have a lot to offer. I suggest trying out “Spaces”, a way of virtually extending your screen size. Also, try the function keys; they have some really cool functionality for moving your application windows around, making it easier for you to find the window you are looking for.

So, once you are confident with the MAC OS, you are ready to begin developing your very own iPhone application. Apple offers a very nice SDK for this, called XCode. To download XCode (plus lots of other development resources), visit developer.apple.com. XCode provides several “build-ready” application templates that really jump start your development. Simply choose one of these templates and click “Build and Go”, and you should already have a working application running in the iPhone simulator (another tool within XCode).

Once you have a working template running, you should take some time to get to know the language. iPhone development is done using Objective-C, or as some of my colleagues were fond of calling it, C[] (pronounced “C-bracket”). Objective-C is obviously an OOP language, and the syntax resembles other “C” languages. The differences are pretty clear right away, however. All object methods are contained within brackets.

(example: [myObject doSomething])

This may seem odd at first, but it has some benefits. It keeps your objects and their methods organized, while doing away with the excessive use of parenthesis that some other languages use. Another nice feature of the syntax is calling methods with multiple parameters. Each parameter (except the first) is preceded with its name, which keeps the programmer from losing track of the order of the parameters.

(example: [myObject doSomething:firstParameter secondParameterName:secondParameter])

This allows the code to be easily read by someone who does not necessarily know the format of the methods.

(example: [myBaseball throwWithSpeed:80 withAngle:45

So, while the syntax may be different, it definitely has its advantages.

If you are serious about learning to develop iPhone applications, I recommend trying out some online tutorials. Apax Software will also be offering workshops in the near future.

Justin Raney
VP Development
jraney[at]apaxsoftware[dot]com