Detecting keystrokes

The getSuggest function is supposed to be passed an event object that it will refer to as keyEvent, which holds data about the key event that just took place:

function getSuggest(keyEvent)
{
.
.
.
}

However, this method of passing the event object doesn’t work in the Internet Explorer, which means getSuggest won’t be passed anything in that browser.You have to use the window.event object instead in the Internet Explorer.So the first line of getSuggest is a typical line of JavaScript that uses the JavaScript conditional operator to make sure you have an event object to work with. Here’s an example that
shows how to use this operator:

var temperature = condition ? 72 : 55;

If condition is true, the temperature variable will be assigned the value 72; if condition is false, temperature will be assigned 55. In the getSuggest function, you can use the conditional operator to test whether keyEvent has a non-zero value. If it doesn’t, you should use window.event instead:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
.
.
.
}

You can also determine which control the user was typing into, but that depends on which browser the user has. In the Internet Explorer, you use the srcElement property of the keyEvent object, but otherwise, you use the target property to get the control the user was typing into:

function getSuggest(keyEvent)
{
function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement; .
.
.
}

Excellent. You have all the data you need about the key event. Now you can
use the following code to check whether the event was a key up event:

function getSuggest(keyEvent)
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if (keyEvent.type == “keyup”) {
.
.
.
}
}

If the event was a key up event, it’s time to read the struck key. If there is
some text in the text field, it’s time to connect to Google Suggest.

Handling the data Google sends you

What does the code look like in google.html? The text field where the user enters text is tied to a function named getSuggest by using the onkeyup event. As a result, getSuggest will be called every time the user types and releases a key. (Note that the event object is passed to getSuggest by this code, because that object holds information about which key was pressed, and also note the <div> element where the suggestions will appear,targetDiv.)

Here’s what the code looks like:

<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>

Connecting to Google for a Live Search

How can you connect to Google Suggest yourself? Say that you placed the search term you wanted to search for in a variable named term. You could then open this URL:

http://www.google.com/complete/search?hl=en&js=true&qu=” + term;

You get back a line of JavaScript from Google Suggest that calls a function named sendRPCDone. Here are the parameters passed to that function:

sendRPCDone(unusedVariable, searchTerm, arrayTerm, arrayResults, unusedArray)

What does the actual JavaScript you get back from Google Suggest look like?

If you’re searching for “ajax”, this is the JavaScript you’ll get back from Google as of this writing:

sendRPCDone(frameElement, “ajax”, new Array(“ajax”, “ajax amsterdam”,
“ajax fc”, “ajax ontario”, “ajax grips”, “ajax football club”, “ajax public
library”, “ajax football”, “ajax soccer”, “ajax pickering transit”), new
Array(“3,840,000 results”, “502,000 results”, “710,000 results”, “275,000
results”, “8,860 results”, “573,000 results”, “40,500 results”, “454,000
results”, “437,000 results”, “10,700 results”), new Array(“”));

You can handle this by putting together a function named sendRPCDone that will display this data