Google live search - Connecting to Google Suggest - shows the whole code to help you

<html>
<head>
<title>Google live search</title>
<style>
#targetDiv {
background-color: #FFEEAA;
width: 30%;
}
</style>
<script language = “javascript”>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHttp”);
}
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);
}
}
function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
if (input.value) {
getData(“google.php?qu=” +
input.value);
}
else {
var targetDiv = document.getElementById(“targetDiv”);
targetDiv.innerHTML = “<div></div>”;
}
}
}
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;
}
</script>
</head>
<body>
<H1>Google live search</H1>
Search for <input id = “textField” type = “text” name = “textField” onkeyup = “getSuggest(event)”>
<div id = “targetDiv”><div></div></div>
</body>
</html>

Check out the PHP script, google.php, which is the script that actually does the communicating with Google. This one takes a little PHP of the kind that appears in detail in Chapter 10. This script is passed the term the user has entered into the text field, and it should get some suggestions from Google, which it does like this with the PHP fopen (file open) statement:

<?php
$handle = fopen(“http://www.google.com/complete/search?hl=en&js=true&qu=” .
$_GET[“qu”], “r”);
.
.
.


This gives you a PHP file handle, which you can use in PHP to read from the Google URL. Here’s how that looks in PHP, where a while loop keeps reading data from Google as long as the end of the data marker isn’t seen. You can check if you’ve reached the end of the data with the feof function, which returns true if the end of the data has been reached:

<?php
$handle = fopen(“http://www.google.com/complete/search?hl=en&js=true&qu=” .
$_GET[“qu”], “r”);
while (!feof($handle)){
.
.
.
}
?>

To get the data from Google, you can use the fgets (file get string) function, and echo the fetched text, which sends that text back to the browser. Here’s how you can make that happen:

<?php
$handle = fopen(“http://www.google.com/complete/search?hl=en&js=true&qu=” .
$_GET[“qu”], “r”);
while (!feof($handle)){
$text = fgets($handle);
echo $text;
}
fclose($handle);
?>

And that’s all you need. Now this script, google.php, will read the suggestion data from Google and send it back to your script.

Everything works as expected.

Showing Google’s response

When you have the search data, you need to show the response from Google, which will be JavaScript. The response is executed with the JavaScript eval function:

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,

Connecting to Google Suggest

To connect to Google Suggest, you call a function named getData which does exactly that — gets the live search data, like this:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
if (input.value) {
getData(“google.php?qu=” +input.value);
}
.
.
.
}
}

If no text exists in the text field, the user deleted that text, so you can clear the suggestions (which appear in a <div> element named targetDiv) as follows:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
if (input.value) {
getData(“google.php?qu=” +
input.value);
}
else {
var targetDiv = document.getElementById(“targetDiv”);
targetDiv.innerHTML = “<div></div>”;
}
}
}

How does the getData function work? This function calls the PHP script that actually interacts with Google Select, and passes on the current search term on to that script. This function is called with the relative URL to call, which is this (where term holds the search term):

google.php?qu=” + term;

That URL is opened in the getData function this way:

<script language = “javascript”>
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHttp”);
}
function getData(dataSource)
{
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open(“GET”, dataSource);
.
.
.
}
}