Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS Download

Un campo con autocompletamento con Script.aculo.us

di: Alvin Laini 25 Giugno 2007

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.

Pagina successiva

Pagine: