chronoforms autocompleter dati da tabella DB

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.

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è

{phocadownload view=file|id=14|target=s}