Flexdatalist - Autocomplete-plug-in met

De HTML5 element is vrij nuttig in de moderne ontwikkeling van de frontend. Toch is het een van die elementen waar niet veel ontwikkelaars van weten.

Het werkt op een invoerveld waar je kunt autosuggest bepaalde waarden voor de invoer. De standaard setup ziet er goed uit en we hebben een aantal coderingstips behandeld voor het bouwen van coole effecten met autosuggest datalists.

Het is echter veel gemakkelijker om werken met een plug-in zoals Flexdatalist. Het ondersteunt een breder scala aan browsers en staat je toe om pas het ontwerp van uw datalist volledig aan.

Niet iedereen heeft behoefte aan functies voor automatisch aanvullen en met native HTML5-datalists, u maakt misschien geen gebruik van een plug-in. Flexdatalist is misschien wel de beste die er is omdat het werkt bouwt voort op native datalist-gedrag toevoegen:

• Mobiele responsieve ondersteuning
• Extra beschrijvingen voor elk item
• Opties voor meerdere selecties tegelijk
• Aangepaste event-handlers

Haar allemaal mogelijk gemaakt door jQuery, zo gaat het heb een kopie van de nieuwste versie nodig om dit te laten draaien. Het ook wordt geleverd met een eigen CSS-stylesheet welke je misschien zou willen combineren in een enkel CSS-bestand om HTTP-verzoeken te verminderen.

Je kunt vinden volledige installatie-instructies op de belangrijkste demopagina die bevat download links naar de Flexdatalist-bestanden.

Het is heel eenvoudig om in te stellen, met slechts één regel JavaScript. Standaard is de plug-in richt alle ingangen op de klas .flexdatalist, dus gewoon toevoegen aan je code zou voldoende moeten zijn om resultaten te zien.

Je voegt gewoon de element in uw invoerveld en Flexdatalist de rest verwerkt. Het zal Auto-style de lijst, inclusief optionele beschrijvende tekst.

De eenvoudigste manier om extra tekst toe te voegen is via een JSON-bestand wat je kunt hechten aan uw invoer via een data-attribuut.

Als je bijvoorbeeld de demo-pagina van Flexdatalist bekijkt, zul je een “landen” invoerveld met het kenmerk data-data = 'countries.json'. Dit verwijst naar een extern bestand dat slaat alle onbewerkte invoergegevens extern op.

Te veel van deze velden kun je vertraag de pagina een beetje. Ik kan me echter niet voorstellen dat veel sites meer dan enkele van deze datalist-formulieren op één pagina uitvoeren, om nog maar te zwijgen van zelfs met deze jQuery-plug-in, ze zijn nog steeds behoorlijk snel.

Om te beginnen, gewoon bezoek de GitHub repo en download een kopie. Dit omvat een link naar de hoofd demopagina die ook volledige documentatie voor setup, JavaScript-opties en tal van voorbeeldcodefragmenten heeft om rond te gaan.