I'm attempting to make a rather simple search box auto complete using this wonderful AJAX stuff.
Unfortunately I'm failing.
This is my HTML and javascript for triggering the request at the moment.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Ajax test</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script>
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "autocomplete.php", {
paramName: "value",
minChars: 2,
tokens: ',',
indicator: 'indicator1'
});
</script>
<style>
div.autocomplete {
position:absolute;
width:250px;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.autocomplete ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:32px;
cursor:pointer;
}
</style>
</head>
<body>
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<span id="indicator1" style="display: none">
<img src="images/spinner.gif" alt="Working..." />
</span>
<div id="autocomplete_choices" class="autocomplete"></div>
</body>
</html>
and this is my simple return code.
Code:
<?php
// Setup Databse Connection
$serverAddress = "localhost";
$databaseToUse = "ajaxtest";
$databaseUsername = "root";
$databasePassword = "";
echo "<ul><li>".$_POST['value']."</li></ul>";
$insertsql = "SELECT * FROM `testing` where inputText LIKE '".mysql_real_escape_string($_POST['value'])."%'";
$result = mysql_query($insertsql);
if (!$result) {
//die('Invalid query: ' . mysql_error());
echo "<ul><li>No matches Found</li></ul>";
} else {
echo "<ul>";
while ($resultlist = mysql_fetch_array($result)) {
echo "<li>".$resultlist[0].",".$resultlist[1]."</li>";
}
echo "</ul>";
}
?>
It doesn't appear to be even making the request.
Any suggestions and also any better methods of debugging JS ?
