如何操作 - 搜尋選單
瞭解如何使用 JavaScript 建立搜尋選單來過濾連結。
搜尋/過濾選單
如何在導航選單中搜索連結
頁面內容
在搜尋框中輸入特定類別/連結以“過濾”搜尋選項。
一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..
一些其他文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..
一些文字..
建立搜尋選單
步驟 1) 新增 HTML
注意：在此演示中，我們使用了 href="#"，因為我們沒有要連結到的頁面。在實際生活中，這應該是一個指向特定頁面的真實 URL。
步驟 2) 新增 CSS
樣式搜尋框和導航選單
示例
/* 樣式搜尋框 */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* 樣式導航選單 */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* 樣式導航連結 */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
步驟 3) 新增 JavaScript
示例
<script>
function myFunction() {
// 宣告變數
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
// 遍歷所有列表項，並隱藏不匹配搜尋查詢的項
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
自己動手試一試 »
提示： 如果您想執行區分大小寫的搜尋，請刪除 toUpperCase()。
提示：還可以檢視 如何過濾表格。
提示：還可以檢視 如何過濾列表。
