如何 - 搜索/过滤下拉列表
了解如何使用 CSS 和 JavaScript 搜索下拉菜单中的项目。
过滤下拉菜单
自己动手试一试 »创建可点击的下拉菜单
创建一个下拉菜单，当用户点击按钮时显示。
步骤 1) 添加 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">关于</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">联系</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
示例解释
使用任何元素来打开下拉菜单，例如 <button>、<a> 或 <p> 元素。
使用容器元素（如 <div>）创建下拉菜单，并在其中添加下拉链接。
将 <div> 元素包装在按钮和 <div> 周围，以便使用 CSS 正确放置下拉菜单。
步骤 2) 添加 CSS
示例
/* 下拉菜单按钮 */
.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;}
/* 容器 <div> - 用于定位下拉菜单内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉菜单内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* 下拉菜单中的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 悬停时更改下拉菜单链接的颜色 */
.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;}
示例解释
我们已使用背景色、填充、悬停效果等对下拉按钮进行了样式设置。
.dropdown 类使用 position:relative，这在我们需要将下拉菜单内容放置在下拉菜单按钮正下方（使用 position:absolute）时是必需的。
`.dropdown-content` 类包含实际的下拉菜单。默认情况下它是隐藏的，悬停时会显示（参见下文）。请注意 `min-width` 设置为 230px。可以随时更改。**提示：** 如果想让下拉菜单的宽度与下拉按钮一样宽，请将 `width` 设置为 100%（并在小屏幕上设置 `overflow:auto` 以启用滚动）。
搜索字段（#myInput）已样式化以适应下拉菜单。我们添加了一个搜索图标，该图标位于搜索字段的左侧，表示这是一个搜索字段。
步骤 3) 添加 JavaScript
示例
/* 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";
}
}
}
自己动手试一试 »
提示：请访问我们的 CSS 下拉菜单教程，了解更多关于下拉菜单的信息。
提示：前往我们的 悬停下拉菜单 了解更多关于悬停下拉菜单的信息
