AJAX search form How To

Hey all,

I have finished my Directory entry form and am now on the job of creating a form to generate reports. I would like to have an AJAX search box at the top where the user could begin typing in a name and the various matches from the db would show-up as links. When selected a report would return with all the info for that person.

However, I would also like to give the user the ability to return a report of the whole directory.

Would I start with a text-box field for the AJAX search and then have a radio button for "entire" directory? Or is there a better way to do this?

I also thought it might be nice to have more options like returning a report for all the names starting with "A" etc.

Any ideas??

Thanks,

So here is what I have so far.

FORM CODE:

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Search by Name:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_0" name="srchname" type="text" onkeyup="showResult(this.value)" />
  <div id="livesearch"></div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">or choose</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="display: none;">Click Me to Edit</label>
    <div class="float_left">
      <input value="Entire Directory" title="" class="radio" id="radio00" name="radio0" type="radio" />
      <label for="radio00" class="radio_label">Entire Directory</label>
      <br />
      

    </div>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_3" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

FORM JAVASCRIPT

function showResult(str)
{
if (str.length==0)
  {
  document.getElementById("livesearch").innerHTML="";
  document.getElementById("livesearch").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","/andy/livesearch.php?q="+str,true);
xmlhttp.send();
}

Then livesearch.php is a simple php page in the root directory which looks like this:

<?php
global $mainframe;

//get the q parameter from URL
$q=$_GET["q"];



$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();


//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";

	// List of Items 
	foreach( $records as $row ) {
		$hint .= $row[lastname].",".$row[firstname]."<br>\n";
	}

}

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

The problem I have at this point is that the AJAX call works just fine but the user cannot select the returned names. Any ideas ??

Thanks,

Basically I want something like:

http://cssdocs.org/

But with Mootools instead?

Hi samoht,

Sorry, I'm very late in replying.

You can do this with Digitarald's AutoCompleter (make sure that you use the version from MooTools 1.1

Bob