Thanks for that ... quite a bit or learning on both!
Heres a simple example for scriptaculous to get you started. It might
work, but I'm typing in a small textarea so sorry if it needs a quick
fix.
html----demo.html--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
function auto()
{
new Ajax.Autocompleter('text', 'text_auto_complete', 'text.php', {});
}
</script>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body onload="auto();">
<!--note the action can be blank, the data will comes from text.php-->
<form action="" method="post">
<div style="display: none;" class="auto_complete"
id="text_auto_complete"></div>
<label for="text" class="ltf">Title</label>
<input id="text" name="text" title="enter the text" class="tf" />
<input type="hidden" value="yes" id="submit" name="submit" />
<input type="reset" value="reset form" name="clear" class="warning"
onclick="return confirm('Are you sure?\nThis will reset the form!');" /</form></body></html>
php-------text.php---
<?php
function cleanup($searchstring)
{
//mysql_real_escape_string( )
$searchstring = eregi_replace("([^a-zA-Z ])",'',$searchstring);
if( trim($searchstring)=='' )
{
return '';
}
else
{
return $searchstring;
}
}
function strAjaxBackToBrowser( $strInput )
{
$strInput = cleanup( $strInput );
$strResults = '';
$eol = "\n";
//$arrData = array();
//$count = 0;
//include db connection stuff
//connect to db, retrieve rows,
//$data = mysql_query($query, $search) or die(mysql_error());
//if(mysql_num_rows($data)==0)
//{
// $strResults .= '<li>Nothing for ' . $strInput . '</li>' . $eol;
//}
//else
//{
// while($arrData[$count] = mysql_fetch_array($data))
// {
// $column1 = ucwords(strtolower($arrData[$count]['column1']));
// $column2 = ucwords(strtolower($arrData[$count]['column2']));
// $strResults .= '<li>' . htmlentities($column1) . ', (' .
htmlentities($column2) . ')</li>' . $eol;
// $count++;
// }
//}
//mysql_close();
//mysql_free_result($data);
$strResults .= '<li>row 1, click me</li> . $eol';
$strResults .= '<li>row 2, click or arrow select</li>' . $eol;
$strResults .= '<li>row 3, similar sort of thing</li>' . $eol;
header( 'Content-Type: application/xml; charset=utf-8' );
return '<' . '?xml version="1.0" encoding="utf-8" ?><ul>' .
$strResults . '</ul>';
}
echo function strAjaxBackToBrowser( $_POST['text'] );
exit;
?>
hope it helps. You can use DOM methods to insert the required div
above the fields and even the javascript, which could otherwise become
an annoying thing to have to do repeatedly each time you make a form,
unless you use php to do it, it also clutters the markup which is
against the principle of unobtrusive js. Also if the user agent doesnt
require javascript it doesnt make sense to do all that messing up of
the DOM.
YMMV with the above good luck.
