Kaip sukurti „Datalist“, kuri yra greitai ieškoma

Išskleidžiamieji sąrašai yra tvarkingas būdas galimybių įvesties laukui, ypač jei galimų parinkčių sąrašas yra ilgas. Vartotojas gali pasirinkti norimą parinktį įvesti į lauką, arba ieškokite galimybių tai gali atitikti tai, ko jie ieško. Galimybė ieškoti per parinktis, tačiau tai yra idealus sprendimas.

Šį elgesį galima pasiekti HTML elementas rodo įvesties pasiūlymus skirtingoms kontrolėms, pvz žyma. Tačiau rodo tik turimas parinktis, kai vartotojas turi jau įvedėte kažką į įvesties lauką.

Mes galime padaryti įvesties lauką naudingesnį, jei įgalinsime vartotojus atidarykite visą parinkčių sąrašą bet kuriuo metu įvedimo proceso metu.

Šiame pranešime matysime, kaip sukurti a išskleidžiamajame sąraše, kurį galima ieškoti bet kuriuo metu naudojant žyma yra toks pat kaip ID iš žyma - tai mes susiejame juos vienas su kitu.

2. Padarykite matomą „Datalist“

Pagal numatytuosius nustatymus HTML elementas yra paslėpta. Tai galime matyti tik tada, kai mes pradėkite įvesti įvestį į lauką datalistas yra prijungtas.

Tačiau yra būdas „priversti“ datalisto turinį (t. Y. Visas jo parinktis) rodyti tinklalapyje. Turime tik suteikti jai tinkamą ekranas turto vertė kitaip nei nė vienas, pavyzdžiui ekranas: blokas;.

 datalistas display: block;

Rodomos parinktys dar neįmanoma pasirinkti šiuo metu tik naršyklė suteikia galimybes jis randa datalisto viduje.

Kaip jau minėta, dėl integruoto elgesio elementas, dalis parinkčių jau yra rodomos ir yra pasirinktinos, bet tik tada, kai vartotojas pradeda rašyti eilutę, į kurią gali prisijungti naršyklė rasti suderinimo parinktį.

Mes taip pat turime rasti mechanizmą, kurį reikia atlikti visi parinktys (pirmiau esančioje ekrano dalyje, esančioje po išskleidžiamajame dataliste) galima pasirinkti ne bet koks kitas įvesties proceso taškas - kai vartotojai nori patikrinti parinktis prieš įvesdami ką nors, arba kai jie jau kažką ėmėsi į įvesties lauką.

3. Įjunkite HTML elementas.

Pasirinkime antrąjį metodą, nes jis bus paprastesnis, ir jį leidžiama naudoti kaip atsarginis mechanizmas naršyklėse, kurios nepalaiko elementas. Kai naršyklė negali atkurti ir nerodyti datalisto, tai suteikia HTML žyma, kodas atrodo taip:

Datalistas Kartu su Pridėti daugkartinis atributas žymelę, todėl, kai naudotojas pasirenka parinktį iš išskleidžiamojo sąrašo, jo vertė bus rodoma srityje. / * kai vartotojas pasirenka parinktį iš DDL, įrašykite jį į teksto lauką * / select.addEventListener ('change', fill_input); funkcija fill_input () input.value = parinktys [this.selectedIndex] .value; hide_select (); Trūkumai Pagrindinis šios technikos trūkumas yra tiesioginio būdo stiliaus nebuvimas elementas su CSS (. \ t ir