Nei precedenti tutorial relativi a chronoconnectivity abbiamo visto come realizzare una piccola applicazione per la gestione di una semplice rubrica, oggi vedremo come aggiungere un filtro per la ricerca e una ricerca semplice.
Ricerca: filtrare dei dati con chronoconnectivity
La seguente guida è il proseguimento naturale di chronoconnectivity e chronoforms parte 1, chronoconnectivity e chronoforms parte 2, chronoconnectivity e chronoforms parte 3 e chronoconnectivity e chronoforms parte 4
Realizzeremo adesso un piccolo form dove verranno filtrati i dati di 2 campi, "Cognome" e "Città", questa funzione, ad esempio, ci aiuterà a ricercare tutte le persone che hanno lo stesso cognome e che vivono nella stessa città.
Potrete testare il form per la ricerca in questa pagina
Portiamoci in "Front list">>"Setting" box "Filters" ed inseriamo i nomi dei campi su cui desideriamo filtrare i dati, questi devono essere nel formato model.campo, quindi inseriamo
gestione.cognomegestione.citta
Adesso in "Front list">>"List Display">>"Table">>"Header Code", inseriamo il codice necessario per generare un form in linea con 2 textbox ed un pulsante:
<input type="text" name="fltr[gestione][cognome]" /><input type="text" name="fltr[gestione][citta]" /><input type="submit" name="submit" value="cerca" />
Il codice andrà inserito fin dalla prima della toolbar.
Questo codice crea i due campi dove inserire i parametri ed un pulsante per avviare la ricerca, però purtroppo non è in linea. Testiamo se il filtro funziona e "abbelliamolo" con un pò di classi Bootstrap.
Utiliziamo le classi Bootstrap per realizzare un form orizzontale
Eliminate il codice appena inserito e sostituitelo con il seguente:
<div class="form-group" id="form-row-multi-2"><div class="gcore-subinput-container" id="fitem-citta"><div class="gcore-input gcore-sub-input gcore-display-table" id="fin-citta"><input name="fltr[gestione][citta]" id="citta" value="" placeholder="" class="form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /><span class="help-block">città</span></div></div><div class="gcore-subinput-container" id="fitem-cognome"><div class="gcore-input gcore-sub-input gcore-display-table" id="fin-cognome"><input name="fltr[gestione][cognome]" id="cognome" value="" placeholder="" class="form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /><span class="help-block">cognome</span></div></div><div class="gcore-subinput-container" id="fitem-cerca"><div class="gcore-input gcore-sub-input gcore-display-table" id="fin-cerca"><input name="cerca" id="cerca" type="submit" value="cerca" class="btn btn-info" style="" data-load-state="" /></div></div><div class="clearfix"></div></div>
Adesso abbiamo un form in linea dall'aspetto professionale!
Inserire un campo di ricerca semplice nella nostra applicazione realizzata con chronoconnectivity V5
In chronoconnectivity è possibile avere un campo di ricerca semplice, dove inserendo il nostro parametro, la ricerca ci mostrerà cosa avrà trovato nella nostra tabella che corrisponde al parametro.
Portiamoci in "Front list">>"Setting" box "Searchable", ed inseriamo (sempre nel formato model.campo) i campi dove vogliamo applicare la nostra ricerca semplice, quindi inseriamo:
gestione.nome:nomegestione.citta:cittàgestione.numero_cellulare: nr cellulare
Inseriamo poi in "Front list">>"List Display">>"Table">>"Header Code", subito dopo la chiusura dell'ultimo div del codice inserito sopra:
<input type="text" name="srch" placeholder="ricerca...." class="form-control A" /><br><input type="submit" class="btn btn-info" name="submit" value="Cerca" />
Adesso nella nostra lista sarà presente una casella di ricerca libera, dove inserendo una parola o parte di essa, verranno restituiti i record contenenti quella parola. Attenzione, la ricerca sarà effettuata solo sui campi inseriti nel box "Searchable".
Lascio a voi la personalizzazione del secondo form, aggiungendo solo che se desideraste il pulsante per il reset della ricerca libera, questo sarà il codice da inserire
<a class="btn btn-warning" href="http://www.icagenda.it/connessione-rubrica.html?&srch=" role="button">Reset</a>
Spero che questa guida vi sia stata di aiuto, e se ritenete di potermi ringraziare offrendomi un caffè cliccate pure nel pulsante sottostante, oppure cliccate su uno dei banner pubblicitari.