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.

<?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');
?>

Commenti

Ritratto di Anonimo

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.

Ritratto di mavimo

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.

Ritratto di Anonimo

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);

Ritratto di mavimo

Woow..

...persino il grande Uccio :D

Grazie per la segnalazione, ho corretto l'errore.

Invia nuovo commento





  • Elementi HTML permessi: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <h2> <h3> <h4>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Maggiori informazioni sulle opzioni di formattazione.



Condividi contenuti