如何 - 搜尋/過濾下拉列表
瞭解如何使用 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 下拉選單教程，瞭解更多關於下拉選單的資訊。
提示：前往我們的 懸停下拉選單 瞭解更多關於懸停下拉選單的資訊
