Kako ustvariti Datalist, ki je takoj iskanje

Spustni seznami so čeden način za možnosti za vnosno polje, zlasti če je seznam razpoložljivih možnosti dolg. Uporabnik lahko izbere želeno možnost tipkanje v polje, ali preglejte možnosti to se lahko ujema s tistim, kar iščejo. Možnost iskanja po možnostih, vendar je idealna rešitev.

To vedenje je mogoče doseči z Element HTML, ki prikaže predloge za vnos za različne kontrole, kot je oznaka. Vendar pa prikaže samo razpoložljive možnosti, ko ima uporabnik že vnesli nekaj v vnosno polje.

Polje za vnos lahko naredimo bolj uporabno, če uporabnikom omogočimo dostop do celotnega seznama možnosti kadar koli med postopkom odvzema vnosa.

V tem prispevku bomo videli, kako ustvariti spustnega seznama, ki ga lahko kadar koli iščete uporabljati oznaka je enako kot id od tag - to je, kako jih vežemo med seboj.

2. Datalist vidimo

Privzeto je Element HTML je skrito. Vidimo jo lahko samo, ko smo začnite tipkati vnos v polje, ki mu je priložen podatkovni list.

Vendar pa obstaja način za "prisilno" vsebino podatkovne zbirke (tj. Vse njene možnosti) za prikaz na spletni strani. Moramo mu dati le primerno zaslon vrednost nepremičnine razen nobena, na primer prikaz: blok;.

 datalist display: block;

Prikazane možnosti še ni mogoče izbrati v tem trenutku samo brskalnik prikaže možnosti najde v podatkovni zbirki.

Kot je navedeno zgoraj, zaradi vgrajenega obnašanja element, del možnosti se že prikaže in je mogoče izbrati, vendar le, ko uporabnik začne vnašati niz, do katerega lahko brskalnik poiščite možnost ujemanja.

Prav tako moramo poiskati mehanizem, ki ga želimo uvesti vse možnosti (na zgornji sliki zaslona, prikazani v spustnem seznamu podatkov) izbira na katero koli drugo točko vnosnega postopka - ko uporabniki želijo preveriti možnosti, preden karkoli vpišejo, ali pa, ko so že vnesli nekaj v vnosno polje.

3. Pripeljite Element HTML.

Izbrali bomo drugo metodo, saj je enostavnejša in jo lahko uporabimo kot nadomestni mehanizem v brskalnikih, ki ne podpirajo element. Ko brskalnik ne more prikazati in prikazati podatkovnega zbora, ga prikaže Oznaka HTML, koda izgleda spodaj:

Datalist V kombinaciji z Dodajanje večkraten atribut , tako da bo, ko uporabnik izbere možnost s spustnega seznama, njegova vrednost prikazana znotraj tudi polje. / * ko uporabnik izbere možnost iz DDL-ja, jo napiši v besedilno polje * / select.addEventListener ('change', fill_input); funkcija fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Pomanjkljivosti Glavna pomanjkljivost te tehnike je odsotnost neposrednega načina oblikovanja element s CSS (videz in