如何创建 - 搜索菜单
了解如何创建搜索菜单以使用 JavaScript 过滤链接。
搜索/过滤菜单
如何在导航菜单中搜索链接:
Page Content
Start to type for a specific category/link inside the search bar to "filter" the search options.
Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..
Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..
Some text..
创建搜索菜单
步骤 1) 添加 HTML:
实例
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
注释: 我们在此演示中使用 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() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
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()。
提示: 另请查看 如何过滤表格。
提示: 另请查看 如何过滤列表。
