Hur man skapar en datalist som är direkt sökbar

Dropdown listor är ett snyggt sätt för tillhandahålla alternativ för ett inmatningsfält, särskilt när listan över tillgängliga alternativ är långa. En användare kan välja det alternativ de vill ha med skriver in i fältet, eller titta igenom alternativen Det kan vara en match för vad de letar efter. Att kunna söka igenom alternativen, Det är dock den perfekta lösningen.

Detta beteende kan uppnås med HTML-element som visar inmatningsförslag för olika kontroller, t.ex. märka. dock Visar endast tillgängliga alternativ när användaren har har redan skrivit något in i inmatningsfältet.

Vi kan göra ett inmatningsfält mer användbart om vi aktiverar användarna få tillgång till hela listan med alternativ när som helst under ingångsprocessen.

I det här inlägget ska vi se hur man skapar en rullgardinslista som kan sökas när som helst använda märka är det samma som de id av tagg - så här bindar vi dem till varandra.

2. Gör Datalisten Synlig

Som standard är HTML-element är dold. Vi kan bara se det när vi börja skriva in en inmatning in i fältet datalisten är kopplad till.

Det finns dock ett sätt att "tvinga" innehållet i datalisten (dvs alla dess alternativ) att visas på webbsidan. Vi behöver bara ge det en lämplig visa fastighetsvärde Förutom ingen, till exempel display: block;.

 datalist display: block;

De visade alternativen är ännu inte valbara vid denna tidpunkt bara webbläsaren gör alternativen det finns inom datalisten.

Som nämnts på grund av det inbyggda beteendet hos element, En del av alternativen visas redan och kan väljas, men bara när användaren börjar skriva in en sträng som webbläsaren kan hitta ett matchande alternativ.

Vi måste också hitta en mekanism att göra Allt alternativ (på ovanstående skärmdump som visas under rullgardinsmenyn) valbara på någon annan punkt i processen för ingångsupptagning - när användarna vill kolla in alternativen innan de skriver något, eller medan de redan har tagit något i inmatningsfältet.

3. Ta in HTML-element.

Vi väljer den andra metoden, eftersom det är enklare, och det får användas som en återgångsmekanism i webbläsare som inte stöder element. När en webbläsare inte kan göra och visa datalistan, så är det gör HTML-taggen ser koden ut som följer:

Datalistisk kombinerad med Lägger till flera olika attribut till tagg, så att när användaren väljer ett alternativ i rullgardinslistan visas dess värde inuti fält också. / * När användaren väljer ett alternativ från DDL, skriv det till textfältet * / välj.addEventListener ('ändra', fill_input); funktion fill_input () input.value = options [this.selectedIndex] .value; hide_select (); nackdelar Den största nackdelen med denna teknik är frånvaron av ett direkt sätt att utforma element med CSS (utseendet på och