如何操作 - 过滤/搜索列表

了解如何使用 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'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
/* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}

步骤 3) 添加 JavaScript：

示例

亲自试一试 »

提示：消除toUpperCase() 如果您想执行区分大小写的搜索。

提示：还请查看过滤表。