给出一个html页面,包含搜索功能的列表
时间: 2024-03-15 18:46:08 浏览: 19
好的,这是一个简单的HTML页面,包含一个搜索功能的列表:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Searchable List</title>
<style>
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
input[type="text"] {
padding: 10px;
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Searchable List</h1>
<input type="text" id="search" placeholder="Search...">
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<script>
const searchInput = document.getElementById("search");
const list = document.getElementById("list").getElementsByTagName("li");
searchInput.addEventListener("keyup", function(event) {
const searchTerm = event.target.value.toLowerCase();
for (let i = 0; i < list.length; i++) {
const item = list[i];
const text = item.textContent.toLowerCase();
if (text.indexOf(searchTerm) == -1) {
item.style.display = "none";
} else {
item.style.display = "block";
}
}
});
</script>
</body>
</html>
```
这个页面包含一个标题 "Searchable List",一个输入框和一个无序列表。当用户在输入框中输入文字时,JavaScript代码会搜索列表中的每个项目,如果项目包含搜索词,就显示该项目,否则隐藏该项目。