Flexdatalist - Autofullständig plugin med

De HTML5 element är ganska användbar i modern frontend-utveckling. Ändå är det ett av de element som inte många utvecklare vet om.

Det fungerar på ett inmatningsfält där du kan autosuggest vissa värden för inmatningen. Standardinställningen ser bra ut och vi har täckt några kodningstips om att bygga coola effekter med autosuggest datalistor.

Det är dock mycket lättare att arbeta med ett plugin som Flexdatalist. Det stöder en bredare uppsättning av webbläsare och tillåter dig att Fullständigt anpassa din datalistts design.

Inte alla har behov av autofullständiga funktioner och med inbyggda HTML5-datalistor, du kanske inte stör med ett plugin. Flexdatalist är dock kanske den bästa där ute eftersom den bygger på inbyggda datalistiska beteenden tillägga:

• Mobilt mottagligt stöd
• Extra beskrivningar för varje objekt
• Alternativ för flera val på en gång
• Anpassade händelsehanterare

Dess alla drivna av jQuery, så du vill behöver en kopia av den senaste versionen för att få det att springa. Det är också kommer med sin egen CSS stilark som du kanske vill kombinera i en enda CSS-fil för att minska HTTP-förfrågningar.

Du kan hitta fullständiga installationsanvisningar på huvuddemosidan som innehåller ladda ner länkar till de flexdatalistiska filerna.

Det är väldigt enkelt att ställa in, med bara en enda rad av JavaScript. Som standard är plugin riktar alla inmatningar med klassen .flexdatalist, så att bara lägga till det i din kod bör räcka för att se resultat.

Du lägger bara till element i ditt inmatningsfält och Flexdatalist hanterar resten. det kommer auto-stil listan, inklusive valfri beskrivande text.

Det enklaste sättet att lägga till extra text är genom en JSON-fil som du kan bifoga din inmatning via en datattribut.

Till exempel, om du kolla in Flexdatalistiska demosidan hittar du en “Länder” Inmatningsfält med attributet data-data = 'countries.json'. Detta refererar till en fjärrfil som lagrar alla råa inmatningsdata externt.

För många av dessa fält kan du sakta ner sidan lite. Jag kan dock inte föreställa mig att många webbplatser skulle köra mer än några av dessa datalistformar på en sida, för att inte tala om även med det här jQuery-pluginet, är de fortfarande ganska snabbt.

För att komma igång, bara besök GitHub repo och ladda ner en kopia. Detta inkluderar a länk till huvuddemosidan som också har fullständig dokumentation för installation, JavaScript-alternativ och massor av provkodsutdrag att gå runt.