„Flexdatalist“ - automatinio užbaigimo papildinys su
The HTML5 elementas yra gana naudinga šiuolaikiniame frontendų kūrime. Tačiau tai vienas iš tų elementų, apie kuriuos nežino daugelis kūrėjų.
Jis veikia įvesties lauke, kur galite automatiškai pakoreguoti tam tikras įvesties reikšmes. Numatytoji sąranka atrodo gerai, ir mes aptarėme kai kuriuos kodavimo patarimus, kaip pastatyti vėsius efektus su autosuggest datalists.
Tačiau daug lengviau dirbti su papildiniu toks kaip Flexdatalistas. Tai palaiko platesnį naršyklių asortimentą ir leidžia jums visiškai pritaikyti savo datalisto dizainą.
Ne kiekvienas turi automatinio užbaigimo funkcijų ir su vietiniais HTML5 datalistais, jums gali nepavykti su papildiniu. Tačiau Flexdatalistas galbūt yra geriausias iš ten, nes jis remiasi vietiniais datalistiniais elgesiais Pridėti:
- Mobilus reaguojantis palaikymas
- Papildomi kiekvieno elemento aprašymai
- Įvairių pasirinkčių parinktys vienu metu
- Individualūs įvykių tvarkytojai
Tai visi varomi jQuery, taigi jūs reikia naujausios versijos kopijos gauti šį darbą. Taip pat ateina su savo CSS stilių kad galėtumėte sujungti į vieną CSS failą, kad sumažintumėte HTTP užklausas.
Tu gali rasti visas sąrankos instrukcijas pagrindiniame demo puslapyje, kuriame yra atsisiųskite nuorodas į „Flexdatalist“ failus.
Tai tikrai paprasta nustatyti tik viena „JavaScript“ eilutė. Pagal numatytuosius nustatymus papildinys nukreipia visus įėjimus į klasę .flexdatalistas, todėl tiesiog pridėkite, kad prie savo kodo turėtų pakakti rezultatų.
Jūs tiesiog pridėsite elementas jūsų įvesties lauke ir „Flexdatalist“ tvarko likusią dalį. Tai bus automatiškai stiliaus sąrašą, įskaitant neprivalomą aprašomąjį tekstą.
Paprasčiausias būdas pridėti papildomą tekstą yra per JSON failą kurį galite pridėti prie savo įvesties duomenų atributo pagalba.
Pavyzdžiui, jei peržiūrite „Flexdatalist“ demonstracinį puslapį, rasite a “Šalys” įvesties laukas su atributu data-data = 'countries.json'. Tai reiškia nuotolinį failą saugo visus neapdorotus įvesties duomenis.
Per daug šių laukų galite šiek tiek sulėtinkite puslapį. Tačiau negaliu įsivaizduoti, kad daugelis svetainių viename puslapyje veiks daugiau nei keletas šių datalistinių formų, jau nekalbant apie šį „jQuery“ papildinį. vis dar gana greitai.
Norėdami pradėti, tiesiog apsilankykite „GitHub“ repo ir atsisiųskite kopiją. Tai apima a nuoroda į pagrindinį demonstracinį puslapį kuris taip pat turi pilną dokumentaciją, susijusią su sąranka, „JavaScript“ parinktimis ir daugybe kodo fragmentų, kad galėtų eiti aplink.
