script.aculo.us - Completamento automatico

Per impostazione predefinita, script.aculo.us supporta due fonti per il completamento automatico:

Fonti remote (ottenute tramite Ajax),
Fonti locali (array di stringhe negli script della tua pagina web).

A seconda della fonte che intendi utilizzare, istanzerai Ajax.Autocompleter o Autocompleter.Local , rispettivamente. Sebbene dotati di opzioni specifiche, questi due oggetti condividono un ampio set di funzionalità e forniscono un'esperienza utente uniforme.

Ci sono quattro cose che passerai sempre a questi oggetti mentre li costruisci:

Il campo di testo che desideri rendere autocompletabile. Come al solito, puoi passare il campo stesso o il valore del suo attributo id =.
Il contenitore per le scelte di completamento automatico, che finirà per contenere un <ul> </li> elenco di opzioni tra cui scegliere. Di nuovo, passa l'elemento direttamente o il suoid =. Questo elemento è molto spesso un semplice <div>.</p> </li>
L'origine dati, che verrà espressa, a seconda del tipo di origine, come un array di stringhe JavaScript o come URL per l'origine remota.
Infine, le opzioni. Come sempre, vengono forniti come una sorta di hash ed entrambi gli oggetti di completamento automatico possono accontentarsi di nessuna opzione personalizzata; ci sono impostazioni predefinite adatte per tutto.

Per utilizzare le capacità di autocompletamento di script.aculo.us, dovrai caricare i moduli controls.js ed effects.js insieme al modulo prototype.js. Quindi, il caricamento minimo per script.aculo.us sarà simile a questo:

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Creazione di un completamento automatico Ajax

La sintassi di costruzione è la seguente:

new Ajax.Autocompleter(element, container, url [ , options ] )

Il costruttore dell'Ajax.Autocompleter accetta quattro parametri:

Il nome dell'elemento o il riferimento a un campo di testo che deve essere popolato con una scelta di dati.
Il nome dell'elemento o il riferimento a un elemento <div> da utilizzare come menu di scelte da parte del controllo.
L'URL della risorsa lato server che fornirà le scelte.
Le solite opzioni hash.

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto Ajax.Autocompleter.

Suor n	Opzione e descrizione
1	paramName Il nome del parametro di query contenente il contenuto del campo di testo che viene pubblicato nella risorsa lato server. Il valore predefinito è il nome del campo di testo.
2	minChars Numero di caratteri che devono essere inseriti prima che una richiesta di scelte lato server possa essere lanciata. Il valore predefinito è 1.
3	Frequency L'intervallo, in secondi, tra i controlli interni per vedere se è necessario inviare una richiesta alla risorsa lato server. Il valore predefinito è 0.4.
4	Indicator L'id o il riferimento a un elemento da visualizzare mentre è in corso una richiesta di scelte lato server. Se omesso, nessun elemento viene rivelato.
5	Parameters Una stringa di testo contenente parametri di query aggiuntivi da passare alla risorsa lato server.
6	updateElement Una funzione di callback da attivare quando l'utente seleziona una delle scelte restituite dal server che sostituisce la funzione interna che aggiorna il campo di testo con il valore scelto.
7	afterUpdateElement Una funzione di callback da attivare dopo l'esecuzione della funzione updateElement.
8	Tokens Una singola stringa di testo o un array di stringhe di testo che indicano i token da utilizzare come delimitatori per consentire l'inserimento di più elementi nel campo di testo, ognuno dei quali può essere completato automaticamente individualmente.

Esempio

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>
   
   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

Ora, abbiamo bisogno di un lato server per accedere a questa pagina e fornire l'URL dell'origine dati (serverSideScript.php). Manterrai una logica completa per visualizzare i suggerimenti in questo script.

Ad esempio, stiamo mantenendo un semplice testo HTML in serverSideScript.php . Puoi scrivere il tuo script utilizzando CGI, PHP, Ruby o qualsiasi altro script lato server per scegliere i suggerimenti appropriati e formattarli sotto forma di <ul><li>...</li> </ul> e restituirli al programma chiamante.

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

Questo produrrà il seguente risultato:

con diverse opzioni discusse nella tabella sopra.

Creazione di un completamento automatico locale

La creazione di un completamento automatico locale è quasi identica alla creazione di un completamento automatico Ajax come abbiamo discusso nella sezione precedente.

La principale differenza risiede nel modo in cui il set di dati di supporto da utilizzare per il completamento automatico viene identificato nel controllo.

Con un completamento automatico Ajax, abbiamo fornito l'URL di una risorsa lato server che eseguirà il filtro necessario, dato l'input dell'utente, e restituirà solo gli elementi di dati che corrispondono. Con un autocompletatore locale, forniamo invece l'elenco completo degli elementi di dati, come array di stringhe JavaScript, e il controllo stesso esegue l'operazione di filtraggio all'interno del proprio codice client.

L'intera sintassi di costruzione è in realtà la seguente:

new Autocompleter.Local(field, container, dataSource [ , options ] );

Il costruttore dell'Autocompleter.Local accetta quattro parametri:

Il nome dell'elemento o il riferimento a un campo di testo che deve essere popolato con una scelta di dati.
Il nome dell'elemento o il riferimento a un elemento <div> da utilizzare come menu di scelte da parte del controllo
Per il terzo parametro, invece di un URL come con l'auto-completer assistito dal server, forniamo un piccolo array String, che contiene tutti i valori possibili.
Le solite opzioni hash.

Opzioni

È possibile utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto Autocompleter.Local.

Suor n	Opzione e descrizione
1	Choices Il numero di scelte da visualizzare. Il valore predefinito è 10.
2	partialSearch Abilita la corrispondenza all'inizio delle parole incorporate nelle stringhe di completamento. Il valore predefinito è vero.
3	fullSearch Abilita la corrispondenza ovunque all'interno delle stringhe di completamento. Il valore predefinito è false.
4	partialChars Definisce il numero di caratteri che devono essere digitati prima di tentare una corrispondenza parziale. Il valore predefinito è 2.
5	ignoreCase Ignora maiuscole e minuscole durante la corrispondenza. Il valore predefinito è vero.

Esempio

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>
		
      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>		
   </body>
</html>

Quando viene visualizzato e dopo aver digitato il carattere "a" nella casella di testo, vengono visualizzate tutte le opzioni di corrispondenza.

Usa il nostro compilatore online per una migliore comprensione del codice con diverse opzioni discusse nella tabella sopra.

Questo produrrà il seguente risultato: