AJAX: Suggest

***John*** · #1 (**permalink**) 09-23-2007, 10: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.

JavaScript Code:

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:

HTML4Strict Code:

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

JavaScript Code:

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:

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

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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
AJAX: Intro	John	Tutorials	1	11-07-2007 08:52 PM
Considering Ajax, Part 1: Cut through the hype	Ronin	JavaScript and CSS	0	12-13-2006 02:36 PM
Myth-Busting AJAX (In)security	Jordan	AJAX	1	12-03-2006 01:21 PM
AJAX Evolved	Jordan	JavaScript and CSS	0	09-09-2006 01:12 PM
More AJAX Resources	NeedHelp	JavaScript and CSS	2	07-13-2006 12:57 PM

satrian	........
jackluxford	........
gamiR	........
Fred@eisfi	........
MeTh0Dz\|Reb0rn	........
gamers2000	........
gaylo565	........
chili5	........
CharlesHutchsky	........
aurelABHR	........

CodeCall

Contest Stats

CodeCall Goal

Sponsors

Ads

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)