In questo articolo spiegherò come utilizzare una delle applicazioni piu’ diffuse del web 2.0, ossia l’ autocompletamento. Il punto di forza dell’ autocompletamento sta nel fatto di poter aiutare l’ utente durante la digitazione delle parole, mostrando dei suggerimenti pertinenti.
L’ esempio che viene proposto di seguito fa uso della ormai nota libreria javascritp Scriptacolous (http://script.aculo.us/) che ha realizzato anche un set di api per l’ autocompletamento.
L’ autocompletamento di Scriptacolous si implementa su un campo di testo all’ interno di un form: non si tratta quindi di una classica tendina che si ottiene con il tag <SELECT>. La tendina infatti è un DIV (inizialmente nascosto) che viene riempito dal risultato di una richiesta asincrona e mostrato a video, sfruttando le potenzialità del linguaggio Javascript.
Il contenuto della tendina è l’ elenco dei suggerimenti che sono organizzati all’ interno di una lista non ordinata (UL), dove ogni elemento (LI) è una parola pertinente a quella che si sta cercando.
L’ esempio che segue è costituito da un file html contenente il form di input, e il file php che si occupa di cercare i suggerimenti all’ interno di un database.
Innanzitutto è necessario scaricare l’ ultima versione della libreria Scriptacolous dal sito http://script.aculo.us/downloads e includere all’ interno della pagina html in cui vogliamo attivare l’ autocompletamento, i seguenti file js: prototipe.js, effects.js, controls.js.
Il form di input è il seguente:
<form name="autocompleteTest" action="">
<input type="text" value="" name="findme" id="findme">
<div id="suggestBoxList" class="suggestBox"></div>
<script type="text/javascript">
new Ajax.Autocompleter("findme", "suggestBoxList", "requestScript.php", {minChars: 1});
</script>
</form>
Come possiamo vedere, il core dell’ autocompletamento è l’ oggetto Ajax.Autocompleter. I parametri che riceve in ingresso sono:
• Id dell’ INPUT in cui l’ utente digita le parole da cercare
• Id del DIV che avrà il compito di contenere l’ elenco dei suggerimenti
• il percorso dello SCRIPT che viene invocato nella richiesta asincrona per generare l’ elenco dei suggerimenti
• l’ ultimo argomento permette di impostare alcuni parametri opzionali
Il parametro opzionale che abbiamo considerato è minChars, che indica in numero minimo di caratteri da digitare per poter effettuare la ricerca. La lista delle opzioni sulle quali è possibile agire è consultabile a questo indirizzo: (http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter).
Il file requestScript.php riceve in POST la parola che l’ utente sta digitando nel form di input, e si occupa di generare la lista dei suggerimenti. Il codice è il seguente:
$findme = $_POST['findme'];
$list = '<ul>';
global $con; //si suppone che siamo connessi al db
$sql = "SELEC cognome, nome FROM persone WHERE cognome LIKE '%$findme%'";
$result = mysql_query($sql, $con);
if(mysql_num_rows($result ) > 0){
while($row = mysql_fetch_row($result)){
$list .= '<li>'.$row['cognome'].', '.$row['nome'].'</li>';
}
}
else{
$list .= '<li>Nessun risultato pertinente ...</li>';
}
$list .= '</ul>';
mysql_free_result($result);
echo $list;
unset($list);
Maggiori informazioni sull’ autocompletamento secondo Scriptacolous sono disponibili ai seguenti indirizzi:
http://wiki.script.aculo.us/scriptaculous/show/Autocompletion
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter