Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples

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);
.
.
.
}
}