Flexdatalist - Autofuldfør plugin med

Det HTML5 element er ganske nyttigt i moderne frontend udvikling. Alligevel er det et af de elementer, som ikke mange udviklere ved om.

Det virker på et inputfelt, hvor du kan Autosuggest bestemte værdier for input. Standardopsætningen ser okay ud, og vi har dækket nogle kodningstips om at opbygge kølige effekter med autosuggest datalister.

Det er dog meget nemmere at arbejde med et plugin såsom Flexdatalist. Det understøtter et bredere udvalg af browsere og giver dig mulighed for fuldt ud tilpasse design af din datalist.

Ikke alle har et behov for autofuldføringsfunktioner og med native HTML5-datalister, du kan muligvis ikke gider med et plugin. Men Flexdatalist er måske den bedste derude, fordi den bygger på indfødte datalogiske adfærd at tilføje:

• Mobil responsiv support
• Ekstra beskrivelser for hvert element
• Valg til flere valg på én gang
• Brugerdefinerede hændelseshåndtere

Det er alle drevet af jQuery, så vil du brug for en kopi af den nyeste version for at få det i gang. Det også leveres med sit eget CSS stilark som du måske vil kombinere i en enkelt CSS-fil for at reducere HTTP-anmodninger.

Du kan finde fuld installationsvejledning på hoveddemosiden, som indeholder download links til de fleksdatalistiske filer.

Det er virkelig nemt at oprette med bare en enkelt linje med JavaScript. Som standard er plugin'et målretter alle indgange med klassen .flexdatalist, så bare at tilføje det til din kode skal være nok til at se resultater.

Du tilføjer blot element inde i dit inputfelt og flexdatalist håndterer resten. Det vil auto-stil listen, herunder valgfri beskrivende tekst.

Den enkleste måde at tilføje ekstra tekst på er gennem en JSON-fil som du kan Vedhæft til din indtastning via en datatribuktion.

For eksempel, hvis du tjekker Flexdatalistiske demosiden, finder du en “Lande” inputfelt med attributten data-data = 'countries.json'. Dette refererer til en fjernfil, som gemmer alle de rå inputdata eksternt.

For mange af disse felter kan du sænk siden lidt. Jeg kan dog ikke forestille mig, at mange websteder ville køre mere end et par af disse datalistiske formularer på en side, for ikke at nævne selv med dette jQuery-plugin, de er stadig ret hurtigt.

For at komme i gang, bare besøg GitHub repo og download en kopi. Dette omfatter en link til hoveddemosiden som også har fuld dokumentation for opsætning, JavaScript-muligheder og masser af prøvekodeuddrag til at gå rundt.