概要
这是一个为input标签实现下拉选项功能，且input中可使用模糊匹配，最后可以选中其中一个选项。
代码
这是完整的HTML代码实例，可直接网页显示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dropdown with Fuzzy Search and Selection</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/* 样式用于保持下拉框的可见性和滚动 */
.dropdown-container {
position: relative;
width: 200px;
}
.dropdown-search {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.dropdown {
display: none; /* 默认隐藏下拉框 */
width: 100%;
height: 150px; /* 控制下拉框高度 */
overflow-y: auto; /* 支持滚动 */
border: 1px solid #ccc;
box-sizing: border-box;
position: absolute;
background-color: white;
z-index: 1; /* 确保下拉框在最上层 */
}
.dropdown.show {
display: block; /* 显示下拉框 */
}
.dropdown-option {
padding: 5px;
cursor: pointer;
}
.dropdown-option:hover {
background-color: #f0f0f0; /* 鼠标悬停时改变背景颜色 */
}
</style>
</head>
<body>
<div class="dropdown-container">
<!-- 搜索框 -->
<input type="text" class="dropdown-search" id="search-input" placeholder="Search..." autocomplete="off">
<!-- 下拉框 -->
<div class="dropdown" id="dropdown">
<div class="dropdown-option" data-value="apple">Apple</div>
<div class="dropdown-option" data-value="banana">Banana</div>
<div class="dropdown-option" data-value="orange">Orange</div>
<div class="dropdown-option" data-value="grapes">Grapes</div>
<div class="dropdown-option" data-value="watermelon">Watermelon</div>
<div class="dropdown-option" data-value="blueberry">Blueberry</div>
</div>
</div>
<script>
// 监听搜索输入框的 keyup 事件
$('#search-input').on('keyup', function() {
var searchValue = $(this).val().toLowerCase(); // 获取搜索内容
var dropdown = $('#dropdown'); // 下拉框
// 显示下拉框
dropdown.addClass('show');
// 遍历下拉框的选项
dropdown.find('.dropdown-option').each(function() {
var optionText = $(this).text().toLowerCase(); // 获取选项文本
if (optionText.includes(searchValue)) {
$(this).show(); // 显示匹配的选项
} else {
$(this).hide(); // 隐藏不匹配的选项
}
});
});
// 监听选项的点击事件
$('.dropdown-option').on('click', function() {
var selectedValue = $(this).attr('data-value'); // 获取选项的值
var selectedText = $(this).text(); // 获取选项的文本
// 将选中的文本显示在搜索框中
$('#search-input').val(selectedText);
// 隐藏下拉框
$('#dropdown').removeClass('show');
});
</script>
</body>
</html>
