Autocomplete Widget
Utilizzato per un input di testo visualizza i suggerimenti di un determinato campo da un oggetto JSON
// API dBJs-uiDavide Bausach / 03-11-2015
- el : l'elemento input con classe autocomplete
- strL: il numero di caratteri digitati prima che si visualizzino i suggerimenti
- url: la url dalla quale si otterrà la risposta JSON
- field: la chiave del valore contenuto nell'oggetto JSON da visualizzare nei suggerimenti
- paramName: il name del parametro da inviare lato server dall'input corrispondente
- before: la funzione da eseguire mentre è in esecuzione la chiamata al server
- res: la funzione da eseguire al ritorno contenente la risposta del server
- fn: la funzione alla selezione di un elemento tra i suggerimenti contenente nuovamente la risposta del server e l'indice dell'elemento selezionato
Standard sintax
<div id="myAutocomplete" class="autocompleteContainer"> <input type="text" class="autocomplete" /> </div> //onload new Autocomplete({ el: document.getElementById('myAutocomplete'), strL: 3, url: 'myUrl', field: 'Nome', paramName: 'q', before: function(){ //your code }, res: function(response){ //your code }, fn: function(response,index){ var Jobj = JSON.parse(response); //your code } });
L'Autocomplete widget è un oggetto che va istanziato all'onload del documento,
tale istanza prevede che sia passato come paramentro un oggetto contenente i valori
sopraindicati.
La risposta ottenuta dal servere deve essere un insieme di oggetti json del tipo:
[{"id":"1","Tipo":"Frutta","Nome":"Mela"},
{"id":"2","Tipo":"Frutta","Nome":"Pera"},
{"id":"3","Tipo":"Frutta","Nome":"Banana"},
{"id":"4","Tipo":"Frutta","Nome":"Kiwy"}]
Tale risposta può essere ad esempio l'encoding di una serie di record estratti da un database. Attraverso il paramentro field si decide quale dei campi di un record si vuole visualizzare come suggerimento e con le due funzioni di ritorno si potrebbero usare gli altri valori del record per autocopletare altri input presenti nel nostro form o per effettuare altre operazioni utili.