<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Search with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#dropdownSearch {
margin-bottom: 10px;
padding: 5px;
width: 250px;
border: 1px solid #ccc;
border-radius: 4px;
}
.dropdown-container {
display: inline-block;
position: relative;
}
#filteredDropdown {
display: none;
position: absolute;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
width: 100%;
max-height: 150px;
overflow-y: auto;
z-index: 1000;
}
#filteredDropdown div {
padding: 8px;
cursor: pointer;
}
#filteredDropdown div:hover {
background: lightgray;
}
</style>
</head>
<body>
<input id="dropdownSearch" type="text" placeholder="Search options...">
<div class="dropdown-container">
<select id="dropdownList">
<option>New York</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Miami</option>
</select>
<div id="filteredDropdown"></div>
</div>
<script>
$(document).ready(function(){
var originalOptions = [];
// Store original dropdown values
$("#dropdownList option").each(function() {
originalOptions.push($(this).text());
});
$("#dropdownSearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
var filteredOptions = originalOptions.filter(function(option) {
return option.toLowerCase().indexOf(value) > -1;
});
$("#filteredDropdown").empty().toggle(filteredOptions.length > 0);
filteredOptions.forEach(function(option) {
$("#filteredDropdown").append("<div>" + option + "</div>");
});
});
// Handle option selection
$("#filteredDropdown").on("click", "div", function() {
$("#dropdownList").val($(this).text());
$("#filteredDropdown").hide();
});
$(document).on("click", function(event) {
if (!$(event.target).closest('.dropdown-container').length) {
$("#filteredDropdown").hide();
}
});
});
</script>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.