Flexdatalist - Autofullfør Plugin med
De HTML5 element er ganske nyttig i moderne frontendutvikling. Likevel er det en av de elementene som ikke mange utviklere vet om.
Det fungerer på et felt der du kan Autosuggest bestemte verdier for inngangen. Standardoppsettet ser bra ut, og vi har dekket noen kodingstips om å bygge kule effekter med autosuggest datalister.
Men det er mye lettere å arbeid med et plugin som for eksempel Flexdatalist. Den støtter et bredere utvalg av nettlesere og lar deg Fullstendig tilpasse utformingen av datalisten din.
Ikke alle har behov for autofullføringsfunksjoner og med innfødte HTML5-datalister, du kan ikke bry deg med et plugin. Imidlertid er Flexdatalist kanskje den beste der ute fordi den bygger på innfødte datalistiske oppføringer å legge til:
- Mobil responsiv støtte
- Ekstra beskrivelser for hvert element
- Alternativer for flere valg samtidig
- Tilpassede hendelseshåndterere
Det er alle drevet av jQuery, så du vil trenger en kopi av den nyeste versjonen for å få dette til å løpe. Det også kommer med sin egen CSS stilark som du kanskje vil kombinere til en enkelt CSS-fil for å redusere HTTP-forespørsler.
Du kan finne full oppsett instruksjoner på hoveddemosiden som inkluderer Last ned koblinger til de fleksdatalistiske filene.
Det er veldig enkelt å sette opp med bare en enkelt linje med JavaScript. Som standard, plugin målretter alle innganger med klassen .flexdatalist, så bare å legge til det til koden din bør være nok til å se resultater.
Du legger bare til elementet i ditt felt og Flexdatalist håndterer resten. det vil auto-stil listen, inkludert valgfri beskrivende tekst.
Den enkleste måten å legge til ekstra tekst på er gjennom en JSON-fil som du kan Føy til inntastingen din gjennom et datatributt.
For eksempel, hvis du sjekker ut Flexdatalistiske demo siden finner du en “land” inntastingsfelt med attributtet spesifikasjonsdata = 'countries.json'. Dette refererer til en ekstern fil som lagrer alle de rå inngangsdata eksternt.
For mange av disse feltene kan du senk siden litt. Imidlertid kan jeg ikke forestille meg at mange nettsteder ville kjøre mer enn noen få av disse datalistene på en side, for ikke å nevne selv med dette jQuery-pluginet, er de fortsatt ganske fort.
For å komme i gang, bare besøk GitHub repo og last ned en kopi. Dette inkluderer en lenke til hoveddemosiden som også har full dokumentasjon for oppsett, JavaScript-alternativer og mange utvalgskodeutdrag for å gå rundt.
