Realizzare un campo autocompletante
Gio, 2007/08/02 - 10:20 — mavimo
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.
<?php
function test_form() {
$form['test'] = array(
'#type' => 'textfield',
'#title' => t('Test Autocomplete'),
'#autocomplete_path' => 'test/autocomplete',
'#description' => t('Inserisci una lettera compresa tra la <strong>a</strong> e la <strong>d</strong> per vedere la funzione di autocompletamento in funzione.'),
'#maxlength' => 60,
'#weight' => -10,
);
return
$form;
}
/*
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;
}
function test_autocomplete($string = '') {
if ($string) {
$result = db_query_range("SELECT name FROM {users} WHERE LOWER(name) LIKE LOWER('%s%%')", $string, 0, 10);
while ($user = db_fetch_object($result)) {
$matches[$user->name] = check_plain($user->name);
}
}
print drupal_to_js($matches);
exit();
}
*/
print drupal_get_form('test_form');
?>Segnala questo articolo in:
Altri contenuti che potrebbero interessarti
-
Drupal si occupa esclusivamente della validazione lato server delle informazioni, ma spesso è consigliabile prevedere ad una prima validazione dei dati inseriti dall'utente lato client, in modo da evitare l'invio della richiesta limitando quindi le possibilità di errore. Ovviamente la validazione...
-
Alzi la mano chi non ha mai usato views. Alzi la mano che l'ha mai usato. Ok, non proprio tutti ma buona parte di voi ha alzato la mano, questo perchè è sicuramente uno strumento potentissimo per la visualizzazione delle informazioni, quindi è fondamentale (o comunque molto utile) andare ad... -
Le viste sono uno strumento estremamente potente e permettono di andare ad elaborare le informazioni creando degli elementi (pagine, blocchi, ...) di presentazione. La possibilità di usare dei filtri esposti ne fa degli strumenti adatti alla creazione di strumenti di ricerca dei contenuti. L'... -
Chi avesse iniziato ad utilizzare Drupal 7 si sarà senz'altro d'accordo che stanno nascendo dei temi di partenza molto sofisticati da cui partire per la realizzazione di temi, in particolare sta emergendo sempre più Omega 3. Questi temi, però possono avere necessità di essere estesi per aggiungere...
Articoli più votati
I feed RSS
Tutti gli articoli
Commenti
Qualche dettaglio per i nubbi
Ciao e grazie del lavoro che hai pubblicato.
Purtroppo io non sono molto pratico e, sebbene intuisco che è questo lo script che mi serve, non riesco a capire quanti file generare esattamente o, comunque, come procedere nell'impostare i diversi passi.
Cioè io capisco che ci vuole un form, ma qual è la sua action? mi spieghi per favore ? oppure mi aggiungi qualche tassello di base?
ovviamente non sono molto chiaro ma è anche tardi :-) a presto, daniele.
Diciamo che il form viene
Diciamo che il form viene generato da un modulo, quindi sfruttando le FormAPI di Drupal, e questo pezzetto di codice serve a inserire l'autocompletamento. Come implementarlo dipende da cosa devi farci tu, quindi mi spiace ma non posso risponderti se non andando a caso (il che sarebbe quasi sicuramente inutile).
Ti consiglio una lettura dell'handbook di Drupal.org e da li in particolare la sezione delle FormAPI.
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.
Invia nuovo commento