如何 - 搜索菜单
了解如何使用 JavaScript 创建搜索菜单以筛选链接。
搜索/筛选菜单
如何在导航菜单中搜索链接
页面内容
在搜索栏中输入特定的类别/链接，以“过滤”搜索选项。
一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..
一些其他文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..一些文字..
一些文字..
创建搜索菜单
步骤 1) 添加 HTML
示例
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="搜索.." title="输入类别">
<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() {
// 声明变量
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()。
提示: 还可以查看 如何过滤表格。
提示: 还可以查看 如何过滤列表。
