Ajax autocomplete - onreadystatechange with span names as parameters

Thank you, in advance, for any assistance that you can provide with the following Ajax onreadystatechange issue.  I am trying to add Ajax autocomplete functionality to a web page that has a variable number of menus/text boxes.  Using the details for passing parameters to the onreadystatechange function that were provided by Stephen Lau ( http://whacked.net/2007/11/27/passing-parameters-to-xmlhttprequests-onreadystatechange-function/ ), I constructed the following piece of javascript code:

function display_MenuOnChart(parent,named,spanName)
{
      xmlHttp=GetXmlHttpObject();
      if (xmlHttp==null)
      {
              alert ("Your browser does not support AJAX!");
              return;
        }

      var url="data/HintOnChart.php";
      url=url+"?sid="+Math.random();
      url=url+"&span="+spanName;
      url=url+"&q=";

      xmlHttp.open("GET",url,true);
      xmlHttp.onreadystatechange=function(spanName)
      {
            return function()
            {
                  if (xmlHttp.readyState==4)
                        document.getElementById(spanName).innerHTML=xmlHttp.responseText;
            };
      }

      xmlHttp.send(null);

      var menu_element = document.getElementById(named);
      menu_element.style.display = "";
      var placement = findPos(parent);
      menu_element.style.left = placement[0] + "px";
      menu_element.style.top = placement[1] + "px";
}

The number of spans vary because, after the users fill in the information, submit, and return later to the page, they get five more menus/spans named in sequence that need Ajax autocomplete functionality using this one function.  I.e., there is no fixed limit.  Here is some code that calls the display_MenuOnChart():

echo "<div class=\"popup\" id=\"menu1\" style=\"display:none;\">";
echo "<input type=\"text\" name=\"txt1\" id=\"txt1\" onclick=\"showHintOnChart(this.value,  'box1');\" onkeyup=\"showHintOnChart(this.value,  'box1');\" /><br />";
echo "<span id=\"TxtHint1\"></span><br /><br />";
echo "<span onclick=\"hide_menu('menu1');\">(Close popup)</span>";
echo "</div>";

echo "<div class=\"popup\" id=\"menu2\" style=\"display:none;\">";
echo "<input type=\"text\" name=\"txt1\" id=\"txt2\" onclick=\"showHintOnChart(this.value,  'box2');\" onkeyup=\"showHintOnChart(this.value,  'box2');\" /><br />";
echo "<span id=\"TxtHint2\"></span><br /><br />";
echo "<span onclick=\"hide_menu('menu2');\">(Close popup)</span>";
echo "</div>";
....
echo "<a href=\"#\" onmousedown=\"display_MenuOnChart(this, 'menu1', 'TxtHint1');\">Choose Item for first Box</a>";
echo "<input type=\"text\" id=\"box1\" name=\"box1\" size=\"25\" maxlength=\"100\" />";

echo "<a href=\"#\" onmousedown=\"display_MenuOnChart(this, 'menu2', 'TxtHint2');\">Choose Item for first Box</a>";
echo "<input type=\"text\" id=\"box2\" name=\"box2\" size=\"25\" maxlength=\"100\" />";
...

As you can see, I am trying to have a variably named 'TxtHint' span filled in with Ajax Autocomplete by using the single display_MenuOnChart() function.

The HintOnChart.php file appears to be working, since I can access the correct result at the following URL, for example: http://localhost/HintOnChart.php?q=s&span=TxtHint1

There is no error message displayed when the link for the menu is activated by clicking the <a href> links, but the data from HintOnChart.php does not populate the menus/spans.
[There is an error message ('unknown runtime error') onclicking in the text boxes for the menus (i.e., for the showHintOnChart function), but I could probably fix that if I knew what the problem is with display_MenuOnChart, since they have very similar functionality]

Can you tell me what I am doing wrong in the display_MenuOnChart function to pass the name of the span needed to be handled as a parameter to the onreadystatechanged subfuinction?  Is what I have described even possible?

If you need more info or a clearer explanation, please reply and I'll elaborate further.

Thanks again and take care,
Simon GottesmanStart Free Trial