Forums

AJAX search form How To

samoht 28 Jun, 2010
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,
samoht 28 Jun, 2010
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,
GreyHead 17 Jul, 2010
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
This topic is locked and no more replies can be posted.