Guide e tutorial pratici per joomla e le sue estensioni
Guide e tutorial pratici per joomla e le sue estensioni

Chronoforms V5 si sta dimostrando davvero molto utile nella costruzione di forms avanzati, ed una delle funzionalità che potrebbe tornarci utile è quella dell'auto completamento, ovvero una textbox dove inserendo i primi 2/3 caratteri ti suggerisce una serie di opzioni.

Inserisci le iniziali (almeno 3 lettere) di un qualsiasi comune d'Italia

Powered by ChronoForms - ChronoEngine.com

In questo esempio di auto completamento con chronoforms utilizzeremo una tabella con i comuni d'italia, la stessa che è stata usata nel tutorial per la creazione di dropdown list collegate. La tabella contiene 3 campi:

  • idComune
  • nomeComune
  • idprovincia

I campi che utilizzeremo in questo esempio saranno solo i primi 2, idComune e nomeComune. Fate sempre attenzione al naming; nomeComune non è uguale a nomecomune!!

Iniziamo con il creare il nostro form inserendo il nome senza spazi o sostituendo gli spazi con un UNDERSCORE (meno basso o trattino basso "_").

Portiamoci nel menù DESIGNER e trasciniamo nella area azzurra una TEXT BOX che trovate a sinistra nella zona BASIC.

All'interno della TEX BOX configuriamo i campi necessari così:

  • FIELD NAME: comune
  • FIELD ID: comune
  • LABEL: comune

Ricordatevi sempre di salvare il FORM premendo SAVE, si salva a livello locale dentro le schede con SAVE AND CLOSE, il pulsante verde, ed a livello form (altrimenti e come non salvare niente) premendo il tasto SAVE in alto a destra.

Portatevi adesso nella zona SETUP dove troverete 2 aree verdi vuote. Aggiungete un area verde cliccando nel pulsante verde ADD NEW EVENTS e nominatelo ajax_comuni. Questo nome è di fantasia e potrete nominalro come piace a voi, l'importante è che abbia un nome univoco da ricordarsi successivamente, ma questo lo vediamo fra poco.

  1. Trascinate nell'area verde On load un elemento AUTOCOMPLETER che troverete a sinistra nella zona UTILITIES.
  2. Trascinate nell'area verde On load un elemento HTML (Render Form) che troverete a sinistra nella zona BASIC, facendo in modo che sia ordinato sotto l'elemento AUTOCOMPLETER.
  3. Trascinate nell'area verde On ajax_comuni un elemento DB Read che troverete a sinistra nella zona DATA MANAGEMENT.
  4. Trascinate nell'area verde On ajax_comuni un elemento Custom Code che troverete a sinistra nella zona BASIC, facendo in modo che sia ordinato sotto l'elemento DB Read.

Configuriamo adesso l'autocompleter come riportato di seguito:

  • Field(s) selector: #comune (è il nome del field id inserito del textbox);
  • Field name: tag;
  • Ajax form event: ajax_comuni (questo è il nome della zona verde che abbiamo creato prima);
  • String length: 2 (sarebbe il numero minimo di caratteri prima che appaia il suggerimento, quindi è possibile aumentare a 3 o 4 questo numero di caratteri);
  • Multiple: No

Configuriamo adesso il DB Read come riportato di seguito:

  • Action Label: legge la tabella dei comuni;
  • Enabled: Yes;
  • table name: aaa_comuni (questa è la tabella utilizzata per l'esempio creazione di dropdown list collegate, se avete una tabella con un altro nome inserite quello);
  • Multi read: Yes;
  • Enable model ID: Yes;
  • Model id: Datacom (questo è il nome del model e anche questo può essere un nome di fatasia univoco);
  • Fields: idComune,nomeComune (sono i nomi, separati da una virgola,dei campi usati della tabella aaa_comuni)
  • Order: nomeComune (il campo che deve essere visualizzato);

Premete SAVE AND CLOSE e successivamente SAVE.

Adesso inseriamo il seguente codice dentro l'elemento Custom code, andando prima a inserire un titolo in action label: Codice personalizzato andrà benissimo.

<?php
foreach($form->data['Datacom'] as $un_comune){
    if(!empty($form->data['tag']) AND stripos($un_comune['nomeComune'], $form->data['tag']) === false){
        continue;
    }
    $json[] = array('id' => $un_comune['idComune'], 'text' => $un_comune['nomeComune']);
}
echo json_encode($json);
?>

In questo codice potrete facilmente riconoscere i nomi delle tabelle (idComune e nomeComune) e il nome del model (Datacom).

Questo tutorial sull'auto completamento di dati provenienti da un database realizzato con Chronoforms V5, finisce qui, commentate l'articolo e fatemi sapere se vi è stato utile.

Se il tutorial vi è piaciuto e sopratutto vi è stato di utilità, potete ringraziarmi offrendomi un caffè o semplicemente cliccando in qualche banner.

offrimi un caffè

Commenti   

0 # Beppe 2017-02-16 09:57
Grazie, il form descritto funziona perfettamente ma ti volevo chiedere se è possibile estenderlo facendo in modo che in base al record selezionato con l'autocompleter sia possibile valorizzare in uno a più textbox i valori degli altri campi di una tabella.
Cioè ad esempio, se ho una tabella con 3 campi campo1, campo2 e campo3, avendo tramite l'autocompleter valorizzato nel texbox1 il valore campo1, vorrei che nei textbox2 e textbox3 siano visualizzati i valori in campo2 e campo3.
Saluti
0 # giusebos 2017-02-16 10:20
Credo sia fattibile ma non so esattamente come, con fabrik sarebbe semplice fare una dropdownlist a cascata ma con i campi autocompletati....
0 # ale 2017-09-25 12:06
Grazie per l'ottima guida, funziona tutto alla perfezione! Complimenti
Ho la necessità una volta selezionato il Comune che venga registrato anche il nome della Provincia e il nome della Regione ad esso collegato, come posso procedere? grazie anticipatamente per i suggerimenti

Per pubblicare un commento devi registrarti