function getData(dataSource)
{
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open(“GET”, dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
eval(XMLHttpRequestObject.responseText);
}
}
XMLHttpRequestObject.send(null);
}
}
This calls the sendRPCDone function. All that’s left in google.html is to set up that function in this way:
function sendRPCDone(unusedVariable, searchTerm, arrayTerm,
arrayResults, unusedArray)
{
.
.
.
}
You fill the <div> element, targetDiv, with data you get from Google in the sendRPCDone function, using an HTML table to align the columns. Here’s how to create the table and start looping over the suggestions Google returned:
function sendRPCDone(unusedVariable, searchTerm, arrayTerm,
arrayResults, unusedArray)
{
var data = “<table>”;
var loopIndex;
if (arrayResults.length != 0) {
for (var loopIndex = 0; loopIndex < arrayResults.length;
loopIndex++) {
.
.
.
}
}
data += “</table>”;
var targetDiv = document.getElementById(“targetDiv”);
targetDiv.innerHTML = data;
}
Next, you give each suggestion its own hyperlink which — when clicked — searches Google, redirecting the browser to the Google Web site like this:
function sendRPCDone(unusedVariable, searchTerm, arrayTerm,
arrayResults, unusedArray)
{
var data = “<table>”;
var loopIndex;
if (arrayResults.length != 0) {
for (var loopIndex = 0; loopIndex < arrayResults.length;
loopIndex++) {
data += “<tr><td>” +
“<a href=’http://www.google.com/search?q=” +
arrayTerm[loopIndex] + “‘>” + arrayTerm[loopIndex] +
‘</a></td><td>’ + arrayResults[loopIndex] + “</td></tr>”;
}
}
data += “</table>”;
var targetDiv = document.getElementById(“targetDiv”);
targetDiv.innerHTML = data;
}
The last touch: the targetDiv <div> element is given a light yellow background
in the <style> element in the <head> section
<html>
<head>
<title>Google live search</title>
<style>
#targetDiv {
background-color: #FFEEAA;
width: 30%;
}
</style>
.
.
.
And that’s all it takes.
Because this Google example is a complicated one,
2 comments:
Hi, how come i got this "window.google has no properties" error when using your code. It got highlighted in Firefox at the line eval(XMLHttpRequestObject.responseText);
Hi I had the same problem. The specific error message was
Error: window.google has no properties
This is from Chapter 4 using google select.
Any help is appreciated.
Art
Post a Comment