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.
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:
[ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2" } ]
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.