I want to make an Autocompleter that brings suggestions from the server (the suggestions will appear after you will write the first letter of the word). On the server the words are in a database (a table with words).
I wrote this for the search box
<!DOCTYPE html>
<html>
<head>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<style>
div#sugestii
{width:250px;border:1px solid red}
div#sugestii ul
{
list-style-type:none;
margin:0px;
padding:0px;
}
div#sugestii ul li.selected
{background-color:#ffb;}
div#sugestii ul li
{ cursor:pointer}
</style>
<script>
function initializare()
{
new Ajax.Autocompleter("tbox", "sugestii", "sugestii.php",{})
}
</script>
</head>
<body onload="initializare()" style="margin:0px">
Caseta de cautare:<br/>
<input type="text" id="tbox"/>
<div id="sugestii"></div>
</body>
</html>
And this is sugestii.php
<?php
print '<ul><li>first suggestion</li><li>second suggestion</li><li>third suggestion</li></ul>';
?>
My problem is that the Autocompleter doesn't work and i don't know what i am doing wrong.
Let's use a well done solution that actually works: jquery-ui autocomplete:
read the doc to set it, for the server side wait for a get parameter named "term" and return a json array (by using the function json_encode on an array for example)
buona fortuna amico mio