Ajax autocomplete help

Hello,

I am trying to build a directory with php + mysql.
I am running into a snag on a form that I want to be able to request the directory from. I am trying to build it so that a user could search for a name instead of have to spit out a report of the whole directory. All this is fine, the problem is that I want the input field to use ajax to autocomplete as the user types. I have some ajax working but it does not populate the input field - so I cant get beyond simply displaying the results in a separate div.

I am using mootools - and here is what I have so far.


<form name="Report" id="Report" method="post" action="zprotest.php" >
	<label class="cf_label" style="width: 150px;">Search by Name:</label>
		<input class="cf_inputbox" maxlength="150" autocomplete="off" size="30" title="" id="srchname" name="srchname" type="text" onchange="htmlData('/andy/livesearch.php', 'q='+this.value)"  />
	<div id="livesearch"></div>
	<span class="cf_text">or choose</span> 
		<input value="Entire Directory" title="" class="radio" id="radio00" name="radio0" type="radio" />
	<label for="radio00" class="radio_label">Entire Directory</label>
	<br /><br />
	<input value="Submit" name="button_3" type="submit" />
</form>

function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}

function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
           document.getElementById("livesearch").innerHTML= xmlHttp.responseText;
   }
   else {
           //alert(xmlHttp.status);
   }
}

// Will populate data based on input
function htmlData(url, qStr)
{
   if (url.length==0)
   {
       document.getElementById("livesearch").innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }

   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

and hear is livesearch.php

<?php
//get the q parameter from URL
$q=$_GET["q"];
//$p=$_POST['ps_search_str'];


$database =& JFactory::getDBO();
$database->setQuery( '
SELECT 
	cf_id,firstname,lastname
FROM jos_chronoforms_directory
WHERE parent_id=0
AND lastname LIKE "'.$q.'&#37;"
');

$database->query();
$records = $database->loadAssocList();

//$hint=$q;
if (strlen($q)>0)
{
$hint="";
$hint.="<ul>\
\	";
	// List of Items 
	foreach( $records as $row ) {
		$hint .= '<li class="">'.$row[lastname].','.$row[firstname].'</li>'."\
";
	}
$hint.="</ul>\
\	";

}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//output the response
echo $response;

?>