How to do a Local Site Search Using Google Ajax Search API
It has been awhile since I have put up a tutorial. Today I am going to give a quick overview of using the Google Ajax Search API to do a local site search (It is much easier than it looks). I hadn’t really played with the Google Search API until yesterday but it is pretty cool and fairly easy to integrate. The particular site I had to do this on had a search box on the top of every page that needed to search a very large and static site. Without this API we didn’t really have a way to do that. To see how it was accomplished using the API read on.
If you would like to see this search in action I have ported it through to search Stemkoski.com and you can view it here: http://www.stemkoski.com/demos/googleajaxsearch/. To help any of you trying to integrate this into your site I have stripped out everything you don’t need. The main three elements to getting the search on your page is the JavaScript and CSS section at the top, a body onload function call to the JavaScript, and a DIV element that is replaced by the AJAX call. (Make sure to change the API Key to match your site you can sign up for a new one at: http://code.google.com/apis/ajaxsearch/signup.html):
Below is my customized JavaScript. Note is is designed for a site search of Stemkoski.com if you are search ing a different site you will need to modify the site name and text.
<!-- SEARCH CODE --> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAMiRwTrBY62JXahx8a6u0ohSCVIVrVp0mhAcmmPOWJ40LGgYYOhQXJZ0OV7vQ0VvAFcWTWWUoYKG83A" type="text/javascript"> </script> <script language="Javascript" type="text/javascript"> function OnLoad() { //CREATE SEARCH CONTROL CLASS var searchControl = new GSearchControl(); //PULL DOWN QUERY FROM URL IF PRESENT var query = "<?PHP echo($_GET['q']); ?>"; //CREATE CUSTOM SEARCH OPTIONS var options = new google.search.SearcherOptions(); options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); //CUSTOMIZE THE SEARCH TOOLS var siteSearch = new google.search.WebSearch(); siteSearch.setUserDefinedLabel("Stemkoski.com Results"); siteSearch.setUserDefinedClassSuffix("stemkoskiSearch"); siteSearch.setSiteRestriction("stemkoski.com"); searchControl.addSearcher(siteSearch, options); //REPLACE DIV WITH RESULTS searchControl.draw(document.getElementById("searchcontrol")); //IF QUERY EXISTS PRE POPULATE if(query) { searchControl.execute(query); } } </script> <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet" /> <!-- END SEARCH CODE -->
The body onload function:
<body onload="OnLoad();">The div that is replaced with the Google Ajax call:
<div id="searchcontrol" />In my particular case I had to have the ability to pre-populate the search with results from an external search form. This form was just a simple form in the header of every page of the website. The HTML for this form looks like:
<form action="index.php" method="get" style="margin:0px;"> <input type="image" src="images/zl_go.jpg" alt="submit" name="submit" value="submit" class="zl_button right" /> <input type="text" name="q" class="zl_search right" /> </form>
It posts through a querystring index.php?q=term to search. You can see a sample of this search by going to: http://www.stemkoski.com/demos/googleajaxsearch/index.php?q=PHP
To do this I added in the variable query and populated it with the querystring value from the URL.
//PULL DOWN QUERY FROM URL IF PRESENT var query = "<?PHP echo($_GET['q']); ?>";
I also added in this JavaScript code which executes a search if one is present.
//IF QUERY EXISTS PRE POPULATE
if(query) {
searchControl.execute(query);
}Here is the complete code including all HTML to perform a search. Remember to change the API key to match your website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Stemkoski.com Google Search API Demo</title> <!-- SEARCH CODE --> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAMiRwTrBY62JXahx8a6u0ohSCVIVrVp0mhAcmmPOWJ40LGgYYOhQXJZ0OV7vQ0VvAFcWTWWUoYKG83A" type="text/javascript"> </script> <script language="Javascript" type="text/javascript"> function OnLoad() { //CREATE SEARCH CONTROL CLASS var searchControl = new GSearchControl(); //PULL DOWN QUERY FROM URL IF PRESENT var query = "<?PHP echo($_GET['q']); ?>"; //CREATE CUSTOM SEARCH OPTIONS var options = new google.search.SearcherOptions(); options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); //CUSTOMIZE THE SEARCH TOOLS var siteSearch = new google.search.WebSearch(); siteSearch.setUserDefinedLabel("Stemkoski.com Results"); siteSearch.setUserDefinedClassSuffix("stemkoskiSearch"); siteSearch.setSiteRestriction("stemkoski.com"); searchControl.addSearcher(siteSearch, options); //REPLACE DIV WITH RESULTS searchControl.draw(document.getElementById("searchcontrol")); //IF QUERY EXISTS PRE POPULATE if(query) { searchControl.execute(query); } } </script> <link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet" /> <!-- END SEARCH CODE --> </head> <body onload="OnLoad();"> <div id="searchcontrol" /> </body> </html>
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Please check you site http://www.stemkoski.com/demos/googleajaxsearch
it is not working
Do you know of a way to remove the search bar and just show the results as I have the search form in another section of the site. Thanks.
We are developing a new website using a CMS on Microsoft ASP.net Someone said I can add this code to the search page on my old website and any request search posted in the new search page will be transfered to the search box of the old search page and search the old site.
The old web server (Apache,Jave,PHP) uses Google search and the new web server uses a CMS on Microsoft ASP.net with a custom search. There is a radial button to select search the old site and the search page for the old site is loaded in a new browser window.
ty very much for this post!!! excellent!!!