Flexdatalista - Autocomplete plugin
A HTML5 elem nagyon hasznos a modern frontend fejlesztésében. Mégis, ez az egyik olyan elem, amit nem sok fejlesztő ismeri.
Olyan beviteli mezőben működik, ahol lehet bizonyos értékek automatikus beviteléhez. Az alapértelmezett beállítás rendben van, és néhány kódolási tippet lefedtünk az autosuggest datalistákkal végzett hűvös effektusok építésére.
Azonban sokkal könnyebb dolgozzon egy pluginnel mint például Flexdatalist. Azt támogatja a böngészők szélesebb skáláját és lehetővé teszi teljes mértékben testre szabhatja a datalista tervét.
Nem mindenkinek szüksége van az automatikus kiegészítésre, és a natív HTML5 datalistákkal, nem feltétlenül zavarja a bővítményt. Azonban a Flexdatalist talán a legjobb, mert ott a natív datalista viselkedésen alapul hozzáadni:
- Mobil válaszadási támogatás
- Minden egyes tételhez további leírások
- Egyszerre több beállítás kiválasztása
- Egyéni eseménykezelők
ez mindegyik jQuery, így lesz szükség van a legfrissebb verzió másolatára ez a futás. Az is saját CSS stíluslapjával érkezik melyet egy CSS-fájlba szeretnénk egyesíteni a HTTP-kérések csökkentése érdekében.
Találhatod teljes beállításokat a fő demóoldalon, amely tartalmazza a letöltési linkeket a Flexdatalist fájlokhoz.
Ez nagyon egyszerű beállítható csak egy sor JavaScript. Alapértelmezés szerint a bővítmény az összes bemenetet célozza meg az osztályban .flexdatalist, így csak hozzá kell adnod, hogy a kódodhoz elég legyen az eredmények megtekintéséhez.
Csak add hozzá a bemeneti mezőben található elem és a Flexdatalist kezeli a többit. ez lesz a lista automatikus stílusa, beleértve az opcionális leíró szöveget.
Az extra szöveg hozzáadásának legegyszerűbb módja JSON fájlon keresztül amit lehet adattulajdonság segítségével csatolja a bemenethez.
Ha például megnézed a Flexdatalist bemutató oldalt, a “Országok” beviteli mező az attribútummal adatok-adatok = 'countries.json'. Ez egy távoli fájlra utal az összes nyers bemeneti adatot kívülről tárolja.
Túl sok ilyen mező van lassítson egy kicsit az oldalt. Azonban nem tudom elképzelni, hogy sok webhely egynél több ilyen datalista űrlapot futtatna egy lapon, nem is beszélve még a jQuery pluginról sem. még mindig elég gyors.
Ahhoz, hogy elinduljon, csak látogasson el a GitHub repo-ra és töltsön le egy példányt. Ez magában foglalja a link a fő demóoldalra amely a teljes dokumentációval rendelkezik a telepítéshez, a JavaScript-opciókhoz, és rengeteg minta-kódrészlethez, hogy körbe menjen.
