Flexdatalist - Autocomplete Plugin s podporou
HTML5 živel v moderním vývoji frontendu. Přesto je to jeden z těch prvků, o nichž neví mnoho vývojářů.
Funguje na vstupním poli, kde můžete Autosuggest určité hodnoty pro vstup. Výchozí nastavení vypadá v pořádku a my jsme se zabývali některé tipy na kódování budování cool efekty s autosuggest datalists.
Je to však mnohem snazší pracovat s pluginem jako Flexdatalista. To podporuje širší pole prohlížečů a umožňuje plně přizpůsobit design vašeho datalist.
Ne každý má potřebu funkcí automatického doplňování a s nativními datalisty HTML5 se nemusíte obtěžovat pluginem. Nicméně, Flexdatalist je možná nejlepší tam, protože to staví na nativním datalistickém chování přidat:
- Mobilní responzivní podpora
- Další popisy pro každou položku
- Možnosti pro více výběrů najednou
- Vlastní obslužné rutiny událostí
To je vše poháněno jQuery, tak budete potřebujete kopii nejnovější verze dostat tento běh. To také přichází s vlastním CSS stylem které chcete zkombinovat do jediného souboru CSS, abyste omezili požadavky HTTP.
Můžeš najít úplné pokyny k nastavení na hlavní demo stránce, která obsahuje odkazy na soubory Flexdatalist.
Je to opravdu jednoduché nastavit, s jen jeden řádek JavaScriptu. Ve výchozím nastavení je plugin zaměřuje všechny vstupy do třídy .flexdatalista, takže stačí přidat, že do vašeho kódu by mělo být dost vidět výsledky.
Stačí přidat element uvnitř vašeho vstupního pole a Flexdatalist se postará o zbytek. Bude to auto-styl seznamu, včetně nepovinného popisného textu.
Nejjednodušší způsob, jak přidat další text, je prostřednictvím souboru JSON které můžete připojte ke svému vstupu pomocí datového atributu.
Například, pokud se podíváte na stránku Flexdatalist demo, najdete “Zemí” vstupní pole s atributem data-data = 'countries.json'. To odkazuje na vzdálený soubor, který ukládá všechna surová vstupní data externě.
Příliš mnoho z těchto polí můžete trochu zpomalte stránku. Nedokážu si však představit, že by na mnoha stránkách fungovalo více než několik těchto formulářů datalist na jedné stránce. stále dost rychle.
Chcete-li začít, jen navštivte repo GitHub a stáhněte si kopii. To zahrnuje odkaz na hlavní demo stránku který má také plnou dokumentaci pro nastavení, možnosti JavaScriptu a spoustu ukázkových kódových útržků.
