Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Dati “flessibili” con FlexdataList

Pubblicato il 24 Giugno 202025 Giugno 2020 Categoria:
  • Plugins

Flexdatalist è un plug-in jQuery per la creazione di campi di input a completamento automatico.

La libreria utilizza il tag <datalist> di HTML5.HTML5, permettendo agli sviluppatori di organizzare facilmente tutti i possibili valori di selezione e le loro proprietà.

Può essere utilizzato sia per selezioni singole, ma è perfetto per le selezioni multiple.

L’interfaccia utente è molto chiara e l’implementazione davvero facile.

jQuery Flexdatalist

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:

[ { "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.

jQuery Flexdatalist
44 downloads

Flexdatalist

Download 2.2.4.zip 136 B Vers. 2.2.4
4 Condivisioni
Share4
Tweet
Share
Pin

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (2816 download)
  • jquery-1.4.1.min.js (2611 download)
  • tinytips11.html (2490 download)
  • jquery-ui-1.8rc1.zip (2483 download)
  • jqueryformwizard-201.html (2452 download)
  • 1.0.0.zip (2431 download)
  • calendarPicker.html (2352 download)
  • jquery-1.4.2.min.js (2349 download)
  • jquerytools120.html (2319 download)
  • move-background.html (2318 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2021 jQuery Italia
Designed By ZeeTheme
Utilizziamo i cookie per garantire la migliore esperienza sul nostro sito. Se continui a utilizzare questo sito, acconsenti al loro utilizzo.OKPrivacy policy