Dati “flessibili” con FlexdataList
Flexdatalist è un plug-in jQuery per la creazione di campi di input a completamento automatico.
La libreria utilizza il tag <datalist> di HTML5.
Può essere utilizzato sia per selezioni singole, ma è perfetto per le selezioni multiple.
L’interfaccia utente è molto chiara e l’implementazione davvero facile.
I valori nella selezione possono essere caricati in vari modi:
- tramite tag <datalist>
- tramite file .json
- tramite chiamata ajax di un file .json
La particolarità interessante di questo plugin è data dal fatto che, rispetto al più classico Select2 dove il file .json caricato è nel classico formato id, text, come ad esempio:
con Flexdatalist si possono caricare file .json multivalore, come
[{"0":{
"id":"100",
"name":"Italy",
"iso2":"IT",
"iso3":"ITA",
"phone_code":"39",
"continent":"Europe",
"capital":"Rome",
"capital_timezone":"Europe/Rome",
"currency":"Euro"
}
}]e la ricerca può essere associata ad uno dei campi con l’opzione “searchIn“.
Le OPZIONI disponibili sono numerose e possono essere implementate o tramite attributo data dell’imput seclto per la selezione o tramite il classico initter javascript
HTML
<input type="text"
placeholder='Write your country name'
class='flexdatalist'
data-data='countries.json'
data-search-in='name'
data-visible-properties='["name","capital","continent"]'
data-value-property='*'
data-min-length='2'
name='country_free_type'>JAVASCRIPT
$('.flexdatalist').flexdatalist({
minLength: 2,
valueProperty: '*',
visibleProperties: ["name","capital","continent"],
searchIn: 'name',
data: 'countries.json'
});Non mancano nè i METODI (che vanno dai classici “imposta valore”, “aggiungi valore”, “rimuovi valore”, ecc.) nè gli EVENTI che permettono il triggering in vari momenti (ad esempio dopo il caricamento di tutti i dati).
Il progetto è del portoghese Sérgio Dinis Lopes.
