如何搜索/筛选下拉菜单
- Previous page Filter elements
- Next page Sorted list
学习如何使用 CSS 和 JavaScript 在下拉菜单中搜索项目。
过滤下拉菜单
创建可点击的下拉菜单
创建一个当用户单击按钮时出现的下拉菜单。
第一步 - 添加 HTML：
<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>
Voorbeeldverklaring:
可以使用任何元素来打开下拉菜单，例如一个 <button>，<a> 或 <p> 元素。
使用一个容器元素（如 <div>）来创建下拉菜单，并在其中添加下拉菜单的链接。
用一个 <div> 元素包裹住按钮和另一个 <div>，以便使用 CSS 正确定位下拉菜单。
第二步 - 添加 CSS：
/* 下拉菜单按钮 */
.dropbtn {
achtergrondkleur: #04AA6D;
kleur: wit;
padding: 16px;
lettergrootte: 16px;
rand: niet;
cursor: pointer;
}
/* Wanneer de knop van het vervolgkeuze-menu wordt gehoverd of gefocust */
.dropbtn:hover, .dropbtn:focus {
achtergrondkleur: #3e8e41;
}
/* Zoekveld */
#myInput {
box-sizing: border-box;
achtergrond-beeld: url('searchicon.png');
achtergrond-positie: 14px 12px;
achtergrond-herhaling: niet-hervatten;
lettergrootte: 16px;
padding: 14px 20px 12px 45px;
rand: niet;
rand-onder: 1px vast #ddd;
}
/* Wanneer het zoekvak focus krijgt of wordt geklikt */
#myInput:focus {rand: 3px vast #ddd;}
/* Container <div> - gebruikt voor het positioneren van de inhoud van het vervolgkeuze-menu */
.dropdown {
positie: relatief;
display: inline-blok;
}
/* Inhoud van het vervolgkeuze-menu (standaard is dit verborgen) */
.dropdown-content {
display: niet zichtbaar;
positie: absoluut;
achtergrondkleur: #f6f6f6;
min-breedte: 230px;
border: 1px vast #ddd;
z-index: 1;
}
/* Links binnen het vervolgkeuze-menu */
.dropdown-content a {
kleur: zwart;
padding: 12px 16px;
text-decoration: none;
display: blok;
}
/* Verander de kleur van de link wanneer de muis erover hangt */
.dropdown-content a:hover {achtergrondkleur: #f1f1f1}
/* Toon de vervolgkeuze-menu (wanneer de gebruiker op de knop van het vervolgkeuze-menu klikt, voeg deze klasse toe aan de container .dropdown-content met JS) */
.show {display:block;}
Voorbeeldverklaring:
We hebben de stijl van de dropdown-knop ontworpen, inclusief achtergrondkleur, inspringing, hover-effecten, enz.
.dropdown klasse gebruiken position:relative، omdat we willen dat de dropdown-inhoud exact onder de dropdown-knop komt (door gebruik te maken van position:absolute implementatie).
.dropdown-content De klasse bevat de daadwerkelijke dropdown-menu. Standaard is het verborgen en wordt het weergegeven bij hover (zie hierna). Let op:min-width is ingesteld op 230px. U kunt het naar wens aanpassen. Tip: Als u wilt dat de breedte van de dropdown-inhoud gelijk is aan de breedte van de dropdown-knop, kunt u width Stel in op 100% (en overflow Stel in op auto om op kleine schermen scrollen mogelijk te maken).
De zoekbalk (#myInput) is geoptimaliseerd voor gebruik binnen de dropdown-menu. We hebben een zoekpictogram toegevoegd aan de linkerkant van de zoekbalk, om aan te geven dat dit een zoekbalk is.
Derde stap - Voeg JavaScript toe:
/* Wanneer de gebruiker op de knop klikt, schakelt het tussen het verbergen en weergeven van de dropdown-inhoud */
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";
}
}
}
Related pages
Tutorial:CSS dropdown menu
- Previous page Filter elements
- Next page Sorted list
