如何创建 - 过滤/搜索列表
了解如何使用 JavaScript 创建过滤器列表。
过滤器列表
如何使用 JavaScript 搜索列表中的项目。
创建搜索列表
步骤 1) 添加 HTML:
实例
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search
for names..">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
注释: 我们在此演示中使用 href="#"，因为我们没有链接它的页面。 在现实生活中，这应该是指向特定页面的真实 URL。
步骤 2) 添加 CSS:
样式化输入元素和列表:
实例
#myInput {
background-image: url('/css/searchicon.png');
/* 添加搜索图标输入 */
background-position: 10px 12px;
/* 定位搜索图标 */
background-repeat: no-repeat;
/* 不要重复图标图像 */
width: 100%;
/* 全宽 */
font-size: 16px;
/* 增加字体大小 */
padding: 12px 20px 12px 40px;
/* 添加一些填充 */
border: 1px solid #ddd;
/* 添加灰色边框 */
margin-bottom: 12px;
/* 在输入下方添加一些空格 */
}
#myUL {
/* 删除默认列表样式 */
list-style-type:
none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
/* 为所有链接添加边框 */
margin-top: -1px;
/* 防止双边框 */
background-color: #f6f6f6;
/* 灰色背景颜色 */
padding: 12px;
/* 添加一些填充 */
text-decoration: none;
/* 删除默认文本下划线 */
font-size: 18px;
/* 增加字体大小 */
color: black;
/* 添加黑色文本颜色 */
display: block;
/* 使其成为一个块元素以填充整个列表 */
}
#myUL
li a:hover:not(.header) {
background-color: #eee;
/* 为所有链接添加悬停效果，标题除外 */
}
步骤 3) 添加 JavaScript:
实例
<script>
function myFunction() {
// 声明变量
var input, filter,
ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul =
document.getElementById("myUL");
li =
ul.getElementsByTagName('li');
// 遍历所有列表项，并隐藏那些与搜索查询不匹配的项
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
</script>
亲自试一试 »
提示: 如果要执行区分大小写的搜索，请删除 toUpperCase()。
提示: 另请查看 Filter Table.
