Miten luodaan Datalisti, joka on heti haettavissa

Pudotusluettelot ovat siisti tapa vaihtoehtoja syöttökenttään, varsinkin kun käytettävissä olevien vaihtoehtojen luettelo on pitkä. Käyttäjä voi valita haluamansa vaihtoehdon kirjoittamalla kenttään, tai katso vaihtoehtoja se voi olla sama kuin mitä he etsivät. Voit etsiä vaihtoehtoja, on kuitenkin ihanteellinen ratkaisu.

Tämä käyttäytyminen voidaan saavuttaa HTML-elementti näyttää syöttöehdotuksia eri säätimille, kuten tag. kuitenkin näyttää vain käytettävissä olevat vaihtoehdot, kun käyttäjä on jo kirjoittanut jotain syöttökenttään.

Voimme tehdä syöttökentän käyttökelpoisemmaksi, jos sallimme käyttäjien käyttää kaikkia vaihtoehtoja milloin tahansa syöttöprosessin aikana.

Tässä viestissä näemme, miten luodaan a avattavasta luettelosta, joka on haettavissa milloin tahansa käyttämällä tag on sama kuin id n tag - näin me sitomme ne toisiinsa.

2. Tee Datalist näkyvistä

Oletuksena on HTML-elementti on kätketty. Voimme vain nähdä sen, kun me alkaa kirjoittaa tuloa kenttään datalisti on liitetty.

On kuitenkin olemassa tapa "pakottaa" datalistin sisältö (ts. Kaikki sen asetukset) näkyvät verkkosivulla. Meidän on vain annettava sille sopiva näyttö omaisuuden arvo muu kuin ei mitään, esimerkiksi display: block;.

 datalisti näyttö: lohko;

Näytetyt vaihtoehdot eivät ole vielä valittavissa tässä vaiheessa vain selain tekee vaihtoehdot se löytyy datalistista.

Kuten edellä on mainittu, johtuen sisäänrakennetusta käyttäytymisestä elementti, osa vaihtoehdoista on jo näkyvissä ja ne ovat valittavissa, mutta vain kun käyttäjä alkaa kirjoittaa merkkijonon, johon selain voi löytää sopiva vaihtoehto.

Meidän on myös löydettävä mekanismi kaikki vaihtoehdot (yllä olevassa kuvassa, joka näkyy pudotusvalikossa) valittavissa at mikä tahansa muu syöttöprosessin kohta - kun käyttäjät haluavat tarkistaa asetukset ennen kuin he kirjoittavat mitään, tai kun he ovat jo ottaneet jotain syöttökenttään.

3. Tuo HTML-elementti.

Valitsemme toisen menetelmän, koska se on yksinkertaisempi ja sitä voidaan käyttää varajärjestelmänä selaimissa, jotka eivät tue elementti. Kun selain ei pysty näyttämään ja näyttämään datalistia, se tekee HTML-tunniste, koodi näyttää alla olevalta:

Datalist yhdistettynä Lisääminen moninkertainen omistaa tunniste, niin että kun käyttäjä valitsee avattavasta luettelosta vaihtoehdon, sen arvo näkyy alalla. / * kun käyttäjä valitsee vaihtoehdon DDL: stä, kirjoita se tekstikenttään * / select.addEventListener ('change', fill_input); toiminto fill_input () input.value = asetukset [this.selectedIndex] .value; hide_select (); haittoja Tämän tekniikan pääasiallinen haittapuoli on suoran tavan puuttuminen elementti CSS: n kanssa ja