Hogyan lehet létrehozni egy Datalist, ami azonnal kereshető

A legördülő listák egy egyszerű út opciók nyújtása egy beviteli mező esetében, különösen akkor, ha a rendelkezésre álló lehetőségek listája hosszú. A felhasználó kiválaszthatja a kívánt opciót gépeljen be a mezőbe, vagy nézze át az opciókat ez lehet egyezik azzal, amit keresnek. Lehetősége van a lehetőségek keresésére, Az ideális megoldás azonban.

Ez a viselkedés a HTML elem beviteli javaslatokat jelenít meg különböző vezérlőkhöz, például a címke. azonban csak a rendelkezésre álló opciókat jeleníti meg, amikor a felhasználó rendelkezik már beírt valamit a beviteli mezőbe.

A beviteli mezőt jobban használhatjuk, ha engedélyezzük a felhasználókat hozzáférhet az opciók teljes listájához a beviteli folyamat során bármikor.

Ebben a bejegyzésben látni fogjuk, hogyan hozhatunk létre egy legördülő lista, amely bármikor kereshető használni a címke ugyanaz mint a id a címke - így kötjük össze őket egymással.

2. Legyen látható a Datalista látható

Alapértelmezés szerint a HTML elem rejtett. Csak azt láthatjuk, amikor mi kezdje be a bevitelt a mezőbe a datalista csatlakozik.

Van azonban mód a datalista tartalmának „kényszerítésére” (azaz az összes lehetőségre) megjelenjen a weboldalon. Csak megfelelőnek kell lennünk kijelző ingatlan érték más mint egyik sem, például display: block;.

 datalista display: block;

A megjelenített beállítások még nem választhatóak ezen a ponton csak a böngésző a beállításokat a datalista belsejében található.

Ahogy a fentiekben említettük, a elem, a beállítások egy része már megjelenik és választható, de csak akkor, ha a felhasználó olyan karakterláncot ír be, amelyre a böngésző képes talál egy megfelelő opciót.

Meg kell találnunk egy mechanizmust is minden opciók (a fenti képernyőn a legördülő datalista alatt) választható nál nél a bemeneti folyamat bármely más pontja - ha a felhasználók meg akarják nézni az opciókat, mielőtt bármit beírnának, vagy ha már bevittek valamit az input mezőbe.

3. Hozd be a HTML elem.

A második módszert választjuk, mivel ez egyszerűbb, és megengedett használni mint egy tartalék mechanizmus olyan böngészőkben, amelyek nem támogatják a elem. Ha a böngésző nem tudja megjeleníteni és megjeleníteni a datalistát teszi a HTML-címke, a kód az alábbiak szerint néz ki:

Datalista Kombinálva A többszörös attribútum a címke, így amikor a felhasználó kiválaszt egy beállítást a legördülő listából, annak értéke megjelenik a területén is. / * ha a felhasználó kiválaszt egy opciót a DDL-ből, írja be a * / select.addEventListener szövegmezőbe ('change', fill_input); függvény fill_input () input.value = opciók [this.selectedIndex] .value; hide_select (); hátrányai Ennek a technikának a fő hátránya a a. \ t elem CSS (a megjelenés a CSS) és