菜单栏带搜索框的JavaScript实现通常涉及以下几个基础概念:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu with Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<input type="text" id="search-box" placeholder="Search...">
<ul id="menu-items">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
<li>Elderberry</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
.menu-container {
width: 300px;
margin: auto;
}
#search-box {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
#menu-items {
list-style-type: none;
padding: 0;
}
#menu-items li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
document.addEventListener('DOMContentLoaded', function() {
const searchBox = document.getElementById('search-box');
const menuItems = document.getElementById('menu-items').getElementsByTagName('li');
searchBox.addEventListener('input', function() {
const searchText = searchBox.value.toLowerCase();
for (let i = 0; i < menuItems.length; i++) {
const itemText = menuItems[i].textContent.toLowerCase();
if (itemText.includes(searchText)) {
menuItems[i].style.display = 'block';
} else {
menuItems[i].style.display = 'none';
}
}
});
});
通过上述步骤和代码示例,可以实现一个基本的带搜索框的菜单栏,并根据具体需求进行进一步的优化和扩展。
没有搜到相关的沙龙