This weekend I messed around with some of the google API's and for the most part, they rock. Some more than others but overall they are pretty frickin slick. As most know in the industry, you can use Googles API's to create and "mashup" any number of their services. Want to create a maps implementation for the listing of homes you have in your DB... no problem , can do, and fairly simply in fact. Today, we are gonna talk about site search, and the Search Component from Google.

Before doing this a while back I had setup a custom search engine using Google CoOp... Basically a little mini subset of google where you can tell google to only scour one site or 10 sites and return the results for just those sites. Perfect for webmasters or companies who need a powerful search interface for their site and a REALLY good price... free. But thats another post all together.

In the beginning of Custom Sarch you could use the little styling tools to color your links and setup the general look and feel. But now with the AJAX Search Component you are pulling the results in directly to your page wth AJAX requests. And all it take is a few lines of code.

First order of business, setup the div for your results... and pull in the API from Google.

<div id="cse-1">Loading...</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script>

Then we need to instantiate the Google search API setup the OnLoad function. So right under your div and script from above, dump this code in your page.

<script type="text/javascript">
    google.load('search', '1');
    function OnLoad() {
        // create a search control
        var searchControl = new google.search.CustomSearchControl('YOUR_CUSTOM_SEARCH_ENGINE_ID _HERE');
        // draw options
        var drawOptions = new google.search.DrawOptions();
        drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_LINEAR);
        // tell the searcher to draw itself and tell it where to attach
        searchControl.draw(document.getElementById("cse-1"), drawOptions);
        // set the link target
        searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
        // execute an inital search
        searchControl.execute();
    }
    google.setOnLoadCallback(OnLoad);
</script>

Take note of this line here

searchControl.draw(document.getElementById("cse-1"), drawOptions);

See the "cse-1" callout in the quotes.. that's your div ID from the beginning... this is where we tell the AJAX functions to write the results and the search bar. Name it to what ever you like, just make sure you have a div with a matching ID somewhere ABOVE! this script.

As well this line at top

var searchControl = new google.search.CustomSearchControl('YOUR_CUSTOM_SEARCH_ENGINE_ID _HERE');

The large CAPS letters there are for you to put in your custom search engine id number, found in your custom search engine control panel. Its a horribly long id number so it shouldn't be to hard to find. Leaving that area blank will get you general results from Google.

The next one to look at is the line that executes the query

searchControl.execute();

This line could easily be modified to accept a parameter that you send from your own form. So lets assume that we are using PHP and that somewhere on our site there is a form that submits to our serach page. And lets say it posts a variable called query...

<?php $query = (!empty($_POST['query'])) ? "'".$_POST['query']."'" : "" ; ?> searchControl.execute(<?php echo $query; ?>);

Now our search will fire when the page loads and look for the term that was passed in the form. Excuse any errors in the PHP code, it was off the top of my head, so may need some tweaking, but thats the idea.

When the search is performed it will pull in the results to the page allowing you to style and structure them using CSS. Much nicer than the classic "IFRAME" results pages. For more info check this link to the AJAX Search API. Take a look at some examples and play around, it's really very powerful. Enjoy!

p.s. yup, this site is using this API as well.