Nel web 2.0 è fondamentale creare effetti ed applicazioni lato client che agevolino gli utenti.
In questo articolo vedremo come realizzare un campo autocomplete, simile ad esempio a quello che si trova su Google: in pratica mentre si digita del testo, compaiono sotto alcuni possibili suggerimenti sulla base del testo inserito.
L'autocomplete può essere realizzato utilizzando la tecnologia AJAX, in questo articolo vedremo come farlo utilizzando le librerie Javascript Prototype e Scriptaculous.

Prima di tutto è necessario scaricare le ultime versioni di Prototype e Scriptaculous, quindi estrarre i pacchetti in una cartella, ad esempio "javascript"; fatto questo, inserire nell'head dell'html i link alle librerie javascript:

<script src="http://www.sitodiesempio.it/javascript/prototype.js" type="text/javascript"></script>
<script src="http://www.sitodiesempio.it/javascript/scriptaculous.js" type="text/javascript"></script>

Creiamo adesso un semplice form di inserimento dati con un campo "città", che potrebbe essere un campo autocomplete che suggerisce automaticamente i nomi delle città italiane.
Il codice HTML per la creazione del form sarà di questo tipo:

<form id="form_ricerca" action="action.php" method="post">
<p><label for="nome">Nome:</label><br />
<input type='text' name='nome' id='nome' /></p>
<p><label for="citta">Città:</label><br />
<input type='text' name='citta' id='citta' /></p>
</form>

Il passo successivo è quello di creare un div vuoto, subito sotto il campo che utilizza l'autocomplete, dove appariranno i suggerimenti, il codice precedente diventerà quindi così:

<form id="form_ricerca" action="action.php" method="post">
<p><label for="nome">Nome:</label><br />
<input type='text' name='nome' id='nome' /></p>
<p><label for="citta">Città:</label><br />
<input type='text' name='citta' id='citta' /></p>
<div id="autocomplete_choices" class="autocomplete"></div>
</form>

La classe deve essere obbligatoriamente "autocomplete", mentre l'id a scelta. Ovviamente se ci sono più autocomplete nello stesso form o nella pagina, gli id devono essere diversi.

A questo punto è necessario inizializzare il campo autocomplete: per fare questo bisogna inserire nell'head dell'html il codice javascript per farlo (dopo aver incluso le librerie Prototype e Scriptaculous):

<script type="text/javascript">
/* <![CDATA[ */

new Ajax.Autocompleter("citta", "autocomplete_choices", "http://www.sitodiesempio.it/seleziona_citta.php", {
  paramName: "value",
  minChars: 2
});
        
/* ]]> */
</script>

In pratica bisogna inizializzare l'oggetto Autocompleter, in cui i parametri rapppresentano nell'ordine:

• id del campo di testo al quale applicare l'autocomplete, nel nostro caso "citta" (attenzione: è l'id, non il name)
• id del div da popolare con la lista dei suggerimenti
• url da richiamare e che restituisce la lista dei suggerimenti
• eventuali opzioni aggiuntive, in formato lista parametri di prototype

Le opzioni più comunemente usate sono:

• paramName: il nome del campo con il quale viene inviato, tramite chiamata POST, alla url che rstituisce la lista di suggerimenti
• minChars: numero minimo di caratteri dopo il quale si inizia a presentare i suggerimenti (di default è 1, cosa un pò fastidiosa)

Per la lista completa delle opzioni fare riferimento alla documentazione ufficiale.

Il prossimo step è la realizzazione dello script che restituisce la lista dei suggerimenti, nel nostro caso le città. Un esempio di script PHP potrebbe essere questo (ma può essere realizzato anche in ASP o altro linguaggio):

<?php
include("dbinc.php");

$citta = utf2iso(trim($_POST["value"]));

$query = "SELECT * FROM tabella_citta WHERE citta LIKE '%".$citta."%' ORDER BY citta";
$result = mysql_query($query) or die();
if (mysql_num_rows($result) != 0)
{
    echo "<ul>";
    while ($line = mysql_fetch_array($result))
    {
        echo iso2utf("<li><b>".$line["citta"]."</b><br /><span class=\"informal\">".$line["provincia"]." (".$line["pr"].")</span></li>");
    }
    echo "</ul>";
}
?>

La variabile $citta contiene il valore arrivato tramite POST, ho inserito anche una funzione utf2iso(), perchè nel caso si utilizzi la codifica iso-8859-1 è necessario convetire da UTF a ISO visto che la chiamata AJAX viene fatta in UTF.
Poi si esegue una query SQL al database MySQL per reperire la lista delle città corrispondenti al testo selezionato, i risultati devono poi essere inviati in output in forma di lista HTML non ordinata.
Aggiungendo un campo span con classe "informal" possiamo aggiungere del testo nel suggerimento che poi non compare nel campo di testo nel caso in cui venga selezionata questa voce: ad esempio, nel nostro caso, abbiamo inserito la provincia (scritta per intero) e la sigla della provincia; cliccando sulla voce suggerita, nel campo di testo verrà inserito solo il nome della città.

L'ultima cosa che resta da fare è applicare lo stile con il quale vengono visualizzati i siggerimenti, bisogna aggiungere queste istruzioni al foglio di stile CSS esistente oppure crearne uno nuovo:

/* autocompleter */

div.autocomplete {

  position:absolute;

  width:250px;

  background-color:white;

  border:1px solid #888;

  margin:0px;

  padding:0px;

  z-index: 100;

}

div.autocomplete ul {

  list-style-type:none;

  margin:0px;

  padding:0px;

}

div.autocomplete ul li.selected { background-color: #f5d4a7;}

div.autocomplete ul li {

  list-style-type:none;

  display:block;

  margin:0;

  padding:2px;

  min-height:32px;

  cursor:pointer;

  text-align: left;

  border-top: 1px dotted #888;

}

div.autocomplete ul li:first-child {

    border: none;

}

Questo è solo un piccolo esempio delle potenzialità dell'autocomplete di Scriptaculous; è possibile estenderne le funzionalità aggiungendo un indicatore di attività (spinner), oppure creare una funzione di callback per aggiornare valori di altri campi del form (ad esempio per selezionare automaticamente la provincia di appartenenza della città).