Kuidas luua Datalisti, mis on kohe otsitav

Loendist loendid on korralik viis võimalusi sisendvälja jaoks, eriti kui võimalike valikute loend on pikk. Kasutaja saab valida soovitud variandi kirjuta väljale, või vaadake võimalusi see võib sobida sellega, mida nad otsivad. Võimalus otsida võimalusi, on aga ideaalne lahendus.

Seda käitumist on võimalik saavutada HTML-element seda kuvab sisendettepanekuid erinevate juhtimisseadiste puhul, näiteks silt. Kuid näitab ainult olemasolevaid valikuid, kui kasutaja on juba kirjutanud midagi sisendväljale.

Saame sisendvälja rohkem kasutada, kui lubame kasutajatel juurdepääsuvõimalustele sisendprotsessi ajal.

Selles postituses näeme, kuidas luua a rippmenüü, mis on igal ajal otsitav kasutades silt on sama nagu the id selle tag - see, kuidas me neid üksteisega sidume.

2. Tee Datalist nähtavaks

Vaikimisi on HTML-element on peidetud. Me näeme seda ainult siis, kui me alustage sisendi sisestamist põllule, on datalist lisatud.

Siiski on olemas viis, kuidas datalisti sisu sundida (s.t kõik selle valikud) veebilehel. Me peame andma sellele vaid sobiva kuva vara väärtus muud kui mitte ükski, näiteks kuva: plokk;.

 datalist kuva: plokk;

Kuvatud valikud pole veel valitavad sel hetkel ainult brauser muudab valikud see leiab aset datalisti sees.

Nagu eelpool mainitud, on. \ T element, osa valikuvõimalustest on juba olemas ja neid saab valida, kuid ainult siis, kui kasutaja hakkab kirjutama stringi, millele brauser saab leidke sobiv valik.

Samuti peame leidma mehhanismi kõik valikud (ülaltoodud ekraanil kuvatakse rippmenüü all) valitav juures mis tahes muu sisendi võtmise punkti - kui kasutajad tahavad enne valiku tegemist suvandeid kontrollida või kui nad on juba võtnud midagi sisendväljale.

3. Tooge HTML-element.

Me valime teise meetodi, kuna see on lihtsam ja seda on lubatud kasutada tagavaramehhanismina brauserites, mis seda ei toeta element. Kui brauser ei suuda datalisti näidata ja kuvada, siis see muudab HTML-silt, kood näeb välja allpool:

Datalist Koos Lisamine mitu omistada et kasutaja valib rippmenüüst suvandi, kuvatakse selle väärtus valdkonnas. / * kui kasutaja valib DDL-i suvandi, kirjutage see tekstiväljale * / select.addEventListener ('change', fill_input); funktsioon fill_input () input.value = valikud [this.selectedIndex] .value; hide_select (); Puudused Selle tehnika peamine puudus on -. \ t element CSS-ga (selle välimus) ja