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.

PHP Code:
<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
Code:
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 Code:
<?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.'%"
'
);

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

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

}

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

?>