Flexdatalists - automātiskās papildināšanas spraudnis ar
The HTML5 elementu ir diezgan noderīga mūsdienu frontendu attīstībā. Tomēr tas ir viens no tiem elementiem, par kuriem nav daudz izstrādātāju.
Tas darbojas ievades laukā, kur varat autosuggest noteiktas ievades vērtības. Noklusējuma iestatījumi izskatās labi, un mēs esam iekļāvuši dažus kodēšanas padomus, lai izveidotu atdzist efektus ar autosuggest datalists.
Tomēr ir daudz vieglāk strādāt ar spraudni piemēram, Flexdatalists. Tā atbalsta plašāku pārlūkprogrammu klāstu un ļauj jums pilnībā pielāgot datalista dizainu.
Ne visiem ir vajadzīgas automātiskās pabeigšanas funkcijas, un ar vietējiem HTML5 datalistiem, iespējams, neuztraucieties ar spraudni. Tomēr Flexdatalists, iespējams, ir labākais, jo tur balstās uz vietējo datalistu uzvedību Pievienot:
- Mobilais atsaucīgs atbalsts
- Papildu apraksti katram objektam
- Iespējas vairākām atlasēm uzreiz
- Custom notikumu apstrādātāji
Tas ir visi darbojas ar jQuery, tāpēc jūs nepieciešama jaunākās versijas kopija lai saņemtu šo darbību. Tas arī nāk ar savu CSS stilu kuru vēlaties kombinēt vienā CSS failā, lai samazinātu HTTP pieprasījumus.
Tu vari atrast pilnīgas uzstādīšanas instrukcijas galvenajā demo lapā, kas ietver lejupielādējiet saites uz Flexdatalist failiem.
Tas ir patiešām vienkārši uzstādāms tikai viena JavaScript līnija. Pēc noklusējuma spraudnis ir vērstas uz visām ieejām ar klasi .flexdatalists, tā vienkārši jāpievieno savam kodam, lai redzētu rezultātus.
Jūs vienkārši pievienojat elements jūsu ievades laukā, un Flexdatalist apstrādā pārējo. Tas būs saraksta automātisko stilu, ieskaitot izvēles aprakstošo tekstu.
Vienkāršākais veids, kā pievienot papildu tekstu, ir izmantojot JSON failu kuru jūs varat pievienojiet savam ievadam, izmantojot datu atribūtu.
Piemēram, ja pārbaudāt Flexdatalist demonstrācijas lapu, jūs atradīsiet a “Valstis” ievades lauks ar atribūtu data-data = 'countries.json'. Tas attiecas uz attālo failu saglabā visus neapstrādātus ievades datus ārēji.
Pārāk daudz šo lauku varat lēnām palēnināt lapu. Tomēr es nevaru iedomāties, ka daudzas vietnes vienā lappusē darbosies vairāk nekā dažas no šīm datalistu veidlapām, nemaz nerunājot pat par šo jQuery spraudni. joprojām ir diezgan ātri.
Lai sāktu, vienkārši apmeklējiet GitHub repo un lejupielādējiet kopiju. Tas ietver a saite uz galveno demonstrācijas lapu kas arī satur pilnu dokumentāciju par uzstādīšanu, JavaScript opcijām un daudz koda fragmentu, lai iet apkārt.
