Hoe - Zoek/Filter dropdown
Leer hoe u met CSS en JavaScript naar items zoekt in een vervolgkeuzemenu.
Vervolgkeuzemenu Filter
Een klikbare vervolgkeuzelijst maken
Maak een vervolgkeuzemenu dat verschijnt wanneer de gebruiker op een knop klikt.
Stap 1) HTML toevoegen:
Voorbeeld
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input
type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
Voorbeeld uitgelegd
Gebruik een willekeurig element om het vervolgkeuzemenu te openen, bijvoorbeeld een <button>-, <a>- of <p>-element.
Gebruik een containerelement (zoals <div>) om het vervolgkeuzemenu te maken en voeg de vervolgkeuzelinks erin toe.
Wikkel een <div>-element rond de knop en de <div> om het vervolgkeuzemenu correct te positioneren met CSS.
Stap 2) CSS toevoegen:
Voorbeeld
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border:
none;
border-bottom: 1px solid #ddd;
}
/* The search field
when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
Voorbeeld uitgelegd
We hebben de vervolgkeuzeknop gestyled met een achtergrondkleur, opvulling, zweefeffect, enz.
De .dropdownklasse gebruikt position:relative, wat nodig is wanneer we willen dat de inhoud van de vervolgkeuzelijst direct onder de vervolgkeuzeknop wordt geplaatst (met position:absolute).
De .dropdown-contentklas bevat het daadwerkelijke vervolgkeuzemenu. Het is standaard verborgen en wordt weergegeven bij de muisaanwijzer (zie hieronder). Merk op dat het min-widthis ingesteld op 230px. Verander dit gerust. Tip: Als u wilt dat de inhoud van de vervolgkeuzelijst even breed is als de vervolgkeuzeknop, stelt u de widthin op 100% (en overflow:autoom scrollen op kleine schermen mogelijk te maken).
Het zoekveld (#myInput) is zo opgemaakt dat het in het vervolgkeuzemenu past. We hebben een zoekpictogram toegevoegd, dat links in het zoekveld wordt geplaatst om aan te geven dat dit daadwerkelijk een zoekveld is.
Stap 3) JavaScript toevoegen:
Voorbeeld
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter =
input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
Tip: Ga naar onze CSS Dropdowns Tutorial voor meer informatie over dropdowns.
Tip: ga naar onze zwevende vervolgkeuzelijsten voor meer informatie over zwevende vervolgkeuzelijsten