L'avvento delle applicazioni Web 2.0 ha portato con sé anche il diffondersi di nuove modalità di interazione con l'utente rese possibili dall'utilizzo delle più diffuse librerie Javascript. Un effetto comune in questo tipo di applicazioni Ajax è costituito da campi di input che "si accorgono" di ciò che l'utente vuole ricercare e in tempo reale propongono una risposta consona alla sua ricerca. È il cosiddetto autocompletamento. Nell'esempio che andremo ad analizzare abbiamo usato per implementarlo l'accoppiata Prototype + Script.aculo.us.
Come funziona
Il funzionamento di questo tipo di interazione si può così sintetizzare:
- L'utente inserisce in un campo di input una o più lettere che compongono la parola da ricercare.
- L'applicazione ad ogni carattere inserito esegue un confronto in tempo reale con il database sul server.
- Se vengono trovate delle corrispondenze, esse vengono riportate in un layer al di sotto del campo di input.
Come accennavamo, questo effetto viene implementato tramite la funzione Ajax.Autocompleter resa disponibile dalla libreria Script.aculo.us, ormai giunta alla versione 1.7.0 e basato sul famosissimo framework Prototype.
Utilizzeremo questa funzione per ricercare il nome di un comune da una lista di cento comuni caricati nel database. Va ricordato però che non è necessario conoscere il nome completo di una categoria di ricerca, perché la semplice digitazione di una o più lettere che compongono in questo caso il nome del comune, renderà possibile restringere la ricerca eliminando cosi i dati superflui.
Analizziamo il sorgente:
index.php lato client
<html>
<head>
<title>Esempio di autocompletamento con Ajax</title>
<link rel="stylesheet" href="css/stile.css" type="text/css">
<script type="text/javascript" src="../../scriptaculous-js-1.7.0/lib/prototype.js"></script>
<script type="text/javascript" src="../../scriptaculous-js-1.7.0/src/scriptaculous.js"></script>
</head>
<body>
<div>
<input type="text" id="testo_auto" value=''">
<img src='img/load.gif' id="indicatore_caricamento" style="display:none;" />
</div>
<div id="contenitore_autocompleter" class="autocomplete"></div>
<script type="text/javascript">
new Ajax.Autocompleter('testo_auto','contenitore_autocompleter','dati_autocompletamento.php', {paramName: 'testo_auto',minChars: 1, indicator: 'indicatore_caricamento'});
</script>
</body>
</html>
Viene prima di tutto inclusa all'interno del codice la libreria Script.aculo.us che, come si può osservare, va affiancata da Prototype.
Successivamente si predispone un campo di input identificato attraverso l'id "testo_auto" atto a ricevere le ricerche dell'utente.
Si inserisce anche un'immagine di caricamento, inizialmente nascosta, che sarà resa visibile dalla funzione ad ogni elaborazione.
Si dispone un layer identificato attraverso l'id "contenitore_autocompleter" che conterrà i risultati ottenuti dalla ricerca.
Infine si predispone la funzione Ajax.Autocompleter che si assumerà il compito di eseguire chiamate verso una pagina dinamica sul server (PHP, ASP.NET, etc.), che a sua volta interrogherà il database e incapsulerà le risposte date dalla query in un layer contenitore. Ecco alcuni dettagli del codice:
new Ajax.Autocompleter('id campo input','id layer risposta','url',
{paramName: 'nome var campo input',
minChars: n° minimo caratteri prima di iniziare la ricerca,
indicator: id immagine di caricamento});
Ma possiamo impostare molti altri parametri, per ulteriori approfondimenti è utile consultare la documentazione.
Analizziamo ora il codice sorgente lato server, quello della pagina php dati_autocompletamento.php che serve ad estrapolare i dati dal nostro database e a creare una lista non numerata (<ul>) che è il formato necessario alla funzione JavaScript per i suggerimenti in index.php.
<? // Esegue la connseeione al Database Mysql include("../../connect_db.php"); // Inserisce i nomi delle tabelle da utilizzare nel corso dello script // La tabella località conterrà il nome del comune $tab_localita="localita"; // controlla che il campo di input che genera la query non sia nullo // e che non contenga caratteri che possano intaccare la mia query if(isset($testo_auto) && !eregi("%",$testo_auto)) { $sql_dati=mysql_query("SELECT comune FROM $tab_localita WHERE comune LIKE '%".addslashes($testo_auto)."%'") or die(mysql_error()); ?> <? if($trovato_sql_dati = mysql_num_rows($sql_dati) > 0) { ?> <ul class='lista_ul'> <? while($result_dati=mysql_fetch_assoc($sql_dati)) { ?> <li><?=$result_dati[comune]?></li> <? } ?> </ul> <? } else { ?> <ul class='no_li'> <li>Dati non presenti</li> </ul> <? } ?> <? } ?>
Per prima cosa si esegue una connessione al database MySql dove sono memorizzati i dati. Poi esaminiamo il corretto flusso dati ricevuto dall'utente, verificando il contenuto della variabile, in modo tale da non trarre in errore la query MySql.
Sarà ricercato il nome del comune caricato nella tabella localita utilizzando il costrutto LIKE di SQL che si avvale dell'utilizzo di un carattere speciale percentuale (%) come prefisso e postfisso alla variabile di ricerca. In questo modo selezioniamo tutti i nomi di comunq che contengono la stringa digitata dall'utente.
Tutto qui. È disponibile per il download un file zip con tutte le pagine dell'esempio.
