Jak vytvořit Datalist to je okamžitě prohledávatelný

Rozevírací seznamy jsou přehledným způsobem poskytování možností pro vstupní pole, zejména pokud je seznam dostupných možností dlouhý. Uživatel si může vybrat možnost, kterou chce do pole, nebo Prohlédněte si možnosti které mohou být shodné s tím, co hledají. Schopnost prohledávat možnosti, je však ideálním řešením.

Toto chování lze dosáhnout pomocí HTML element, který zobrazí vstupní návrhy pro různé ovládací prvky, např. \ t štítek. nicméně zobrazuje pouze dostupné možnosti, když má uživatel už něco napsal do vstupního pole.

Můžeme učinit vstupní pole použitelnějším, pokud to umožníme uživatelům přístup k úplnému seznamu možností kdykoli během procesu zadávání vstupů.

V tomto příspěvku uvidíme, jak vytvořit rozevírací seznam, který lze kdykoli vyhledat za použití štítek je stejné jako id z tag - to je to, jak je spojujeme.

2. Proveďte vizualizaci Datalistu

Ve výchozím nastavení HTML element je skrytý. Vidíme to jen tehdy, když my začněte psát vstup do pole je připojen datalista.

Existuje však způsob, jak „silou“ obsahu datalistu (tj. Všech jeho možností) se zobrazí na webové stránce. Potřebujeme jen dát to vhodné Zobrazit hodnota majetku jiný než žádný, například zobrazení: blok;.

 datalist zobrazení: blok;

Zobrazené možnosti nejsou ještě volitelné v tomto okamžiku pouze prohlížeč možnosti nachází uvnitř datalistu.

Jak bylo uvedeno výše, díky zabudovanému chování živel, část možností se již objeví a je možné ji vybrat, ale jen když uživatel začne psát řetězec ke kterému prohlížeč může najít odpovídající možnost.

Musíme také najít mechanismus, který bychom měli udělat Všechno možnosti (na výše uvedeném snímku zobrazeném pod rozbalovacím datalistem) volitelné v jakýkoli jiný bod procesu přijímání vstupů - když uživatelé chtějí zkontrolovat možnosti dříve, než začnou něco psát, nebo když už něco zadali do vstupního pole.

3. Přiveďte HTML element.

Vybereme druhou metodu, protože je to jednodušší a je dovoleno ji používat jako nouzový mechanismus v prohlížečích, které nepodporují živel. Když prohlížeč nemůže vykreslit a zobrazit datalist, je to poskytuje Značka HTML, kód vypadá takto:

Datalist V kombinaci s Přidání násobek atribut Pokud uživatel vybere volbu z rozevíracího seznamu, její hodnota se zobrazí uvnitř také. / * když uživatel vybere volbu z DDL, zapíše se do textového pole * / select.addEventListener ('change', fill_input); function fill_input () input.value = volby [this.selectedIndex] .hodnota; hide_select (); Nevýhody Hlavní nevýhodou této techniky je absence přímého způsobu, jak styl živel s CSS (vzhled a