Ako vytvoriť datalist, ktorý je okamžite vyhľadateľný

Rozbaľovacie zoznamy sú skvelým spôsobom poskytovanie možností pre vstupné pole, najmä ak je zoznam dostupných možností dlhý. Používateľ si môže zvoliť požadovanú možnosť zadaním do poľa, alebo pozrite sa na možnosti ktoré môžu zodpovedať tomu, čo hľadajú. Možnosť vyhľadať možnosti, je však ideálne riešenie.

Toto správanie sa dá dosiahnuť pomocou funkcie HTML element, ktorý zobrazuje návrhy vstupu pre rôzne ovládacie prvky, ako napr tag. však zobrazuje iba dostupné možnosti, ak má používateľ už niečo napísal do vstupného poľa.

Môžeme urobiť vstupné pole viac použiteľné, ak povolíme používateľom prístup k úplnému zoznamu možností kedykoľvek počas procesu odberu vstupov.

V tomto príspevku uvidíme, ako vytvoriť rozbaľovací zoznam, ktorý je kedykoľvek vyhľadateľný pomocou štítok je to isté ako id z tag - takto ich navzájom viazame.

2. Zistite, či je Datalist viditeľný

V predvolenom nastavení Element HTML je skrytý. Môžeme to vidieť len keď sme my začnite písať vstup do poľa, ku ktorému je pripojený datalista.

Existuje však spôsob, ako "vynútiť" obsah dátového zoznamu (t. J. Všetkých jeho možností) aby sa zobrazili na webovej stránke. Potrebujeme iba to, aby sme boli vhodní zobraziť hodnota nehnuteľnosti iný ako nikto, napríklad Zobrazenie: blok;.

 datalist zobrazenie: blok;

Zobrazené možnosti ešte nie je možné vybrať v tomto okamihu iba prehliadač poskytuje možnosti zistí vnútri datalistu.

Ako už bolo spomenuté, kvôli zabudovanému správaniu sa element, časť možností sa už zobrazuje a je voliteľná, ale iba vtedy, keď používateľ začne písať reťazec, na ktorý môže prehliadač používať nájsť možnosť zhody.

Takisto musíme nájsť mechanizmus, ktorý by sme mali robiť všetko (na horeuvedenej obrazovke zobrazenej pod rozbaľovacou datalistou) voliteľný na akýkoľvek iný bod vstupného procesu - keď si užívatelia chcú skontrolovať možnosti skôr, ako napíšu niečo, alebo keď už niečo zadali do vstupného poľa.

3. Pripojte Prvok HTML.

Druhú metódu si vyberieme, pretože je to jednoduchšie a je možné ju použiť ako záložný mechanizmus v prehliadačoch, ktoré nepodporujú element. Keď prehliadač nemôže vykresliť a zobraziť datalistu, je to urobí HTML tag, kód je vyzerajúci nižšie:

Datalist v kombinácii s Pridanie násobok atribút na tag, takže keď používateľ vyberie z rozbaľovacieho zoznamu možnosť, jeho hodnota sa zobrazí vo vnútri oblasti. / * keď používateľ vyberie možnosť z DDL, napíše do textového poľa * / select.addEventListener ('change', fill_input); funkcia fill_input () input.value = voľby [this.selectedIndex] .value; hide_select (); nevýhody Hlavnou nevýhodou tejto techniky je absencia priameho spôsobu štýlu element s CSS (vzhľad súboru) a