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" 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.0type="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>
Original Source:
Related Stuff
-
MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
-
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
-
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
-
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
-
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
-
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
- PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.