Realizzare un campo autocompletante

Se vi è capitato di dover completare alcuni campi con una serie di termini che si ripetono spesso, ma che a volte possono contenere termini nuovi, avrete di certo sentito la necessità di utilizzare un campo che si autocompleti o che quantomeno mettesse a disposizione i termini già inseriti in modo da avere sottomano i termini già aggiunti e non creare così dei doppioni. Un esempio di questo lo potete vedere andando a cercare un certo utente all'interno di un elenco, per esempio su DrupalItalia o al termine di questa pagina.

Questo è facilmente realizzabile andando ad utilizzare, al momento di creazione del form usando per l'opzione #autocomplete_path il valore user/autocomplete. Ipotizziamo ora che anziché andare a poter scegliere tra l'elenco degli utenti volessimo andare a dare la possibilità di scegliere tra un elenco di chiavi presenti nel nostro database, come potrebbero essere i diversi titoli degli articoli già inseriti. Non essendoci già un impostazione per l'autocompletamento di questa voce dovremmo andare a creare una nostra funzione di autocompletamento, essendo una operazione poco sfruttata ma che ha delle ottime potenzialità andiamo ad analizzare passo passo come fare ciò.

Innanzitutto all'interno del modulo che stiamo sviluppando andremo a creare una funzione che faccia sovrascriva hook_form() per la realizzazione del form. Un esempio banalissimo potrebbe essere: function test_form(&$node) { $form['test'] = array( '#type' => 'textfield', '#title' => t('Test Autocomplete'), '#autocomplete_path' => 'test/autocomplete', '#maxlength' => 60, '#weight' => -10, ); $form['submit'] = array( '#type' => 'submit', '#value' => t('Save'), ); return $form; } in cui sono presenti due elementi, un campo di input (di tipo textfield) a cui abbiamo assegnato la proprietà di autocompletamento come test/autocomplete e un pulsante di submit.

Andiamo ora a creare un nuovo menu raggiungibile dall'indirizzo test/autocomplete che si occupi di creare restituire l'elenco di termini che possono essere aggiunti all'interno della casella di testo. Per fare questo andiamo ad operare usando hook_menu(), in particolare andremo a scrivere il seguente codice: function test_menu() { $items = array(); // Menu per l'autocompleteamento del nome dei moduli $items[] = array('path' => 'test/autocomplete', 'title' => t('Test Autocomplete'), 'callback' => 'test_autocomplete', 'access' => TRUE, 'type' => MENU_CALLBACK, ); return $items; } Le proprietà type è settata su MENU_CALLBACK in modo che la voce del menu non sia inserita all'interno del menu visibile dagli utenti, mentre la proprietà access è settata su true per permettere a chiunque di usufruire della caratteristica di autocompletamento. La proprietà callback si occupa di richiamare la funzione che andrà a generare l'elenco delle parole che possono essere inserite, quindi è stata settata con il nome della funzione che andremo a realizzare ora.

La funzione per la ricerca delle voci possibili che devono essere inserite nel campo di autocompletamento viene realizzata come indicati di seguito:function test_autocomplete($string = '') { if ($string) { $result = db_query_range("SELECT voce FROM {tabella_elenco} WHERE LOWER(voce ) LIKE LOWER('%s%%')", $string, 0, 10); while ($dati = db_fetch_object($result)) { $matches[$dati->voce] = check_plain($dati->voce); } } print drupal_to_js($matches); exit(); } La funzione è abbastanza semplice e si occupa di andare a recuperare dalla tabella_elenco tutte le voci voce che inizi con le lettere indicate da string (ovvero le lettere inserite dall'utente). Vengono restituiti soltanto i primi dieci termini trovati e non vengono effettuate discriminazioni tra lettere maiuscole e minuscole (case unsensitive), ma questo comportamento è facilmente modificabile agendo sulla query.

Al termine del prelevamento delle voci viene effettuato un ciclo di tutti i risultati ottenuti che vengono inseriti in un array e successivamente questo viene trasformato in javascript per poter essere inviato tramite AJAX alla pagina. Un esempio del risultato ottenibile lo potete vedere qui sotto, dove inserendo le iniziali sotto il campo di input verranno inserite le possibili voci,, lasciando comunque la facoltà di immettere termini al di fuori dell'elenco a disposizione.

Inserisci una lettera compresa tra la a e la d per vedere la funzione di autocompletamento in funzione.

Comments

Piccolo How To, essenzia ed

Piccolo How To, essenziale ed efficace
Bello continua così

Ciao Uccio

PS: piccola nota:$matches[$dat->voce] = check_plain($dati->voce);è invece:$matches[$dati->voce] = check_plain($dati->voce);

Woow..

...persino il grande Uccio :D

Grazie per la segnalazione, ho corretto l'errore.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <td> <tr> <img> <h2> <h3>
  • Lines and paragraphs break automatically.

More information about formatting options

Syndicate content