📅 最后修改于: 2023-12-03 15:25:27.506000 🧑 作者: Mango
带有搜索的颤动下拉列表是一种交互式的UI组件，用户可以在列表中快速查找并选择所需的选项。此外，该组件可以根据用户的输入自动调整列表选项，使其更易于使用。
实现带有搜索的颤动下拉列表需要使用以下技术：
以下是实现该组件的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带有搜索的颤动下拉列表</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
background-color: #f1f1f1;
overflow-y: scroll;
max-height: 200px;
padding: 10px;
border: 1px solid #ccc;
}
.search-box input[type="text"] {
width: 100%;
padding: 6px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.search-box input[type="text"]:focus {
outline: none;
border-color: #aaa;
}
</style>
</head>
<body>
<div class="dropdown">
<button>选择一个选项</button>
<div class="dropdown-content">
<div class="search-box">
<input type="text" placeholder="搜索...">
</div>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
</div>
</div>
<script>
// 获取下拉列表元素和搜索框元素
var dropdown = document.querySelector('.dropdown');
var searchBox = dropdown.querySelector('.search-box input[type="text"]');
// 获取下拉列表选项元素
var options = [...dropdown.querySelectorAll('ul li')];
// 检查一个选项是否与搜索框中的文本匹配
function matchOption(option, text) {
return option.textContent.toLowerCase().indexOf(text.toLowerCase()) > -1;
}
// 根据搜索框中的文本显示或隐藏下拉列表选项
function filterOptions(text) {
options.forEach(function(option) {
if (matchOption(option, text)) {
option.style.display = 'block';
} else {
option.style.display = 'none';
}
});
}
// 监听搜索框的键盘输入事件并更新下拉列表选项
searchBox.addEventListener('input', function() {
filterOptions(searchBox.value);
});
</script>
</body>
</html>
该示例代码创建了一个带有搜索的颤动下拉列表，该组件包含以下元素：
button 元素：用于显示当前选中的选项.dropdown-content 元素：用于包含下拉列表选项.search-box 元素：用于包含搜索框input[type="text"] 元素：用于接收用户输入的搜索文本ul 元素：用于包含下拉列表选项使用CSS将下拉列表设置为仅在鼠标悬停时可见，并在展开时包含滚动条和最大高度限制。搜索框设置为接受用户输入并具有基本样式。
使用JavaScript选择搜索框和下拉列表选项元素，并定义用于过滤选项的函数。该函数在 input 事件时调用，并根据搜索框中的文本更新下拉列表选项的可见性。
最终，将 input 事件侦听器添加到搜索框。这使得当用户输入文本时，下拉列表选项将根据文本动态更新。
带有搜索的颤动下拉列表是一种方便的交互式UI组件。使用HTML/CSS/JavaScript，可以轻松创建具有这些功能的下拉列表，并使其在任何网站上使用。