AJAX: Suggest

One AJAX tool popularized by Google is Google Suggest, and all that is required is a basic modification to the code in the previous tutorial. Lets assume we have a php file that connects to a database that contains all the names of the countries. We are also assuming that the php script is setup to receive a GET variable named $country.

Lets start with the basic AJAX code derived from the previous tutorial, but I'm going to change a few variable names and allow it to accept a parameter.

[highlight="JavaScript"]function suggest($var)
{
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Ajax is not supported by your browser.");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.suggestform.suggestCountry.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET", "countries.php", true);
xmlHttp.send(null);
}[/highlight]

Lets assume we have a form that looks like this:

[highlight="HTML4Strict"]<form name="suggestform">
Country: <input type="text" name="country" />
Suggested Country: <input type="text" name="suggestCountry" />
</form>[/highlight]

What we are going to do, is take the value in the "country" input box and submit it to countries.php which will query the database and return the countries related to the name we typed thus far.

[highlight="JavaScript"]function suggest($var)
{
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Ajax is not supported by your browser.");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.suggestform.suggestCountry.value=xmlHttp.responseText;
}
}
var url = "countries.php?country=" + $var
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}[/highlight]

And thus, we will change our html form to this:

[highlight="HTML4Strict]<form name="suggestform">
Country: <input type="text" name="country" onkeyUp="suggest(this.value)" />
Suggested Country: <input type="text" name="suggestCountry" />
</form>[/code]

The final code will look like this:

[highlight="HTML4Strict"]
<html>
<head>
<title>Ajax Suggest</title>
<script type="text/javascript">
function suggest($var)
{
var xmlHttp;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Ajax is not supported by your browser.");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.suggestform.suggestCountry.value=xmlHttp.responseText;
}
}
var url = "countries.php?country=" + $var
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<form name="suggestform">
Country: <input type="text" name="country" onKeyUp="suggest(this.value)" />
Suggested Country: <input type="text" name="suggestCountry" />
</form>
</html>[/highlight]