Kā izveidot Datalists Tas ir uzreiz meklējams

Nolaižamie saraksti ir veikls veids iespējas ievades laukam, jo īpaši, ja pieejamo iespēju saraksts ir garš. Lietotājs var izvēlēties sev vēlamo opciju ierakstot laukā, vai apskatiet iespējas kas var būt atbilstošs tam, ko viņi meklē. Iespējams meklēt, izmantojot opcijas, tomēr tas ir ideāls risinājums.

Šo rīcību var panākt ar HTML elements parāda ievades ieteikumus dažādām kontrolēm, piemēram, tag. Tomēr rāda tikai pieejamās opcijas, kad lietotājs ir jau ir ievadījis kaut ko ievades laukā.

Mēs varam padarīt ievades lauku vairāk izmantojamu, ja ļaujam lietotājiem piekļūt pilnam iespēju sarakstu jebkurā laikā ievades procesā.

Šajā ziņojumā mēs redzēsim, kā izveidot a nolaižamajā sarakstā, kas ir meklējams jebkurā laikā izmantojot tag ir tāds pats kā the ID no tag - tas ir, kā mēs tos saistām viens ar otru.

2. Padariet redzamu Datalists

Pēc noklusējuma HTML elements ir slēpta. Mēs to varam redzēt tikai tad, kad mēs sāk ievadīt ievadi laukā datalists ir pievienots.

Tomēr ir veids, kā "piespiest" datalista saturu (t.i., visas tās iespējas) parādīties tīmekļa lapā. Mums tikai jāpiešķir tam piemērots displejs īpašuma vērtību citāds nekā neviens nav, piemēram displejs: bloks;.

 datalists display: block;

Parādītās iespējas vēl nav atlasāmi šajā brīdī, tikai pārlūks sniedz iespējas tā atrod datalistu iekšpusē.

Kā jau iepriekš minēts,. \ T elementu, daļa no opcijām jau ir redzamas un ir atlasāmas, bet tikai tad, kad lietotājs sāk rakstīt virkni, uz kuru var pārlūkot atrast atbilstošu opciju.

Mums ir arī jāatrod mehānisms, kas jāizdara viss opcijas (iepriekš redzamajā ekrānā, kas redzams zem izvelkamā datalista) izvēlēties pie jebkuru citu ievades procesa punktu - ja lietotāji vēlas pārbaudīt opcijas, pirms tās neko nedara, vai kamēr tās jau ir ievadījušas ievades laukā.

3. Ievietojiet HTML elements.

Mēs izvēlēsimies otro metodi, jo tā ir vienkāršāka, un to var izmantot kā rezerves mehānisms pārlūkprogrammās, kas neatbalsta elementu. Ja pārlūks nevar atveidot un atainot datalistu, tas tiek darīts padara HTML tag, kods izskatās šādi:

Datalists kopā ar Pievienojot vairāki atribūtu lai lietotājs izvēlētos opciju nolaižamajā sarakstā, tā vērtība tiks parādīta jomā. / * ja lietotājs izvēlas opciju no DDL, ierakstiet to teksta laukā * / select.addEventListener ('change', fill_input); funkcija fill_input () input.value = opcijas [this.selectedIndex] .value; hide_select (); Trūkumi Šīs tehnikas galvenais trūkums ir nav tieša veida stila elementu ar CSS (. \ t un