Flexdatalist - doplnok automatického dopĺňania s

HTML5 element je veľmi užitočný v modernom vývoji frontend. Napriek tomu je to jeden z tých prvkov, o ktorých vie veľa vývojárov.

Pracuje na vstupnom poli, kde môžete autosuggest určité hodnoty pre vstup. Predvolené nastavenie vyzerá v poriadku a pokryli sme niektoré tipy pre vytváranie efektov s autosuggestom.

Je to však oveľa jednoduchšie pracovať s doplnkom ako napr Flexdatalist. to podporuje širšiu škálu prehliadačov a umožňuje vám to plne prispôsobiť dizajn vášho datalistu.

Nie všetci potrebujú funkcie automatického dopĺňania a s natívnymi datalogistami HTML5, nemusíte sa obťažovať pluginom. Avšak, Flexdatalist je možno najlepšie tam, pretože to vychádza zo správania natívneho datalistu pridať:

• Podpora mobilnej komunikácie
• Ďalšie popisy pre každú položku
• Možnosti viacerých výberov naraz
• Vlastné spracovanie udalostí

to je všetky sú poháňané jQuery, tak to urobíte potrebujete kópiu najnovšej verzie aby sa to spustilo. To tiež prichádza s vlastným štýlom CSS ktoré môžete skombinovať do jedného súboru CSS na zníženie požiadaviek HTTP.

Môžeš nájsť úplné pokyny na nastavenie na hlavnej demo stránke, ktorá obsahuje stiahnuť odkazy na súbory Flexdatalist.

Je to naozaj jednoduché nastaviť, s len jeden riadok JavaScript. Predvolene je to doplnok zacieľuje na všetky vstupy triedy .flexdatalist, takže len to, že do svojho kódu stačí vidieť výsledky.

Stačí pridať element vo vnútri vstupného poľa a Flexdatalist spracuje zvyšok. Bude to automatický návrh zoznamu, vrátane voliteľného opisného textu.

Najjednoduchší spôsob pridávania extra textu je prostredníctvom súboru JSON čo môžete pripojte k svojmu vstupu prostredníctvom dátového atribútu.

Ak napríklad vyskúšate demo stránku Flexdatalist, nájdete a “krajiny” vstupné pole s atribútom data-data = 'countries.json'. To odkazuje vzdialený súbor, ktorý ukladá všetky externé vstupné údaje.

Príliš veľa z týchto polí môžete spomaliť stránku trochu. Nemôžem si však predstaviť, že veľa stránok by na jednej stránke spúšťalo viac ako niekoľko týchto dátových formulárov, nehovoriac ani o tomto jQuery plugin, stále dosť rýchlo.

Ak chcete začať, jednoducho navštívte repo spoločnosti GitHub a stiahnite kópiu. Patrí sem a prepojenie na hlavnú stránku demo ktorý má tiež kompletnú dokumentáciu pre nastavenie, možnosti JavaScriptu a množstvo vzorových úryvkov kódu.