概要
这是一个为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>
