Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

AJAX: Suggest

ajax

  • Please log in to reply
No replies to this topic

#1 John

John

    CC Mentor

  • Moderator
  • 4450 posts
  • Location:New York, NY

Posted 23 September 2007 - 07:16 PM

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.

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


Lets assume we have a form that looks like this:

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


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.

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


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

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

  • 0





Also tagged with one or more of these keywords: ajax

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download