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.'%"
');
$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;
?>