Een datalijst maken die direct doorzoekbaar is

Dropdown-lijsten zijn een leuke manier voor het bieden van opties voor een invoerveld, met name wanneer de lijst met beschikbare opties lang is. Een gebruiker kan de gewenste optie kiezen typen in het veld, of doorzoek de opties dat kan een match zijn voor wat ze zoeken. Door de opties kunnen zoeken, echter, is de ideale oplossing.

Dit gedrag kan worden bereikt met de HTML-element dat geeft invoersuggesties weer voor verschillende besturingselementen, zoals de label. Echter toont alleen de beschikbare opties wanneer de gebruiker heeft al iets getypt in het invoerveld.

We kunnen een invoerveld beter bruikbaar maken als we gebruikers in staat stellen dit te doen toegang tot de volledige lijst met opties op elk moment tijdens het invoerproces.

In deze post gaan we kijken hoe we een kunnen maken vervolgkeuzelijst die op elk moment doorzoekbaar is de ... gebruiken label is hetzelfde als de ID kaart van de tag - dit is hoe we ze aan elkaar binden.

2. Maak de Datalist zichtbaar

Standaard is de HTML-element is verborgen. We kunnen het alleen zien, wanneer we begin een invoer te typen in het veld waar de datalist aan is gehecht.

Er is echter een manier om de inhoud van de datalist (dat wil zeggen alle opties) te "forceren". verschijnen op de webpagina. We hoeven het alleen maar geschikt te maken tonen eigendoms-waarde anders dan geen, bijvoorbeeld display: block;.

 datalist display: block;

De weergegeven opties zijn nog niet selecteerbaar op dit moment alleen de browser geeft de opties weer het vindt in de datalist.

Zoals eerder vermeld, vanwege het ingebouwde gedrag van de element, een deel van de opties wordt al weergegeven en kan worden geselecteerd, maar alleen wanneer de gebruiker begint met typen in een tekenreeks waarnaar de browser kan zoek een bijpassende optie.

We moeten ook een mechanisme vinden om te maken allemaal opties (op de bovenstaande screenshot weergegeven onder de dropdown-datalist) selecteerbaar op elk ander punt van het invoerproces - wanneer gebruikers de opties willen bekijken voordat ze iets typen, of terwijl ze al iets hebben opgenomen in het invoerveld.

3. Breng het HTML-element.

We zullen de tweede methode kiezen, omdat deze eenvoudiger is, en deze mag worden gebruikt als een terugvalmechanisme in browsers die geen ondersteuning bieden voor de element. Wanneer een browser de datalist niet kan weergeven en weergeven, is dit het geval maakt het HTML-tag, ziet de code er als volgt uit:

Datalist Gecombineerd met Het toevoegen van de meerdere toeschrijven aan de tag, zodat wanneer de gebruiker een optie selecteert in de vervolgkeuzelijst, de waarde ervan wordt weergegeven in de veld ook. / * wanneer de gebruiker een optie uit DDL selecteert, schrijft u deze naar het tekstveld * / select.addEventListener ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select (); nadelen Het belangrijkste nadeel van deze techniek is de afwezigheid van een directe manier om het element met CSS (het uiterlijk van de en