<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Select Dropdown with Checkboxes and Search</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 12px;
z-index: 1;
}
.dropdown-content label {
display: block;
margin-bottom: 8px;
}
#searchInput {
width: 100%;
padding: 8px;
margin-bottom: 8px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="toggleDropdown()" id="dropdownBtn">Select items</button>
<div id="dropdownContent" class="dropdown-content">
<input type="text" id="searchInput" oninput="filterItems()" placeholder="Search...">
<label><input type="checkbox" value="item1"> Item 1</label>
<label><input type="checkbox" value="item2"> Item 2</label>
<label><input type="checkbox" value="item3"> Item 3</label>
</div>
</div>
<script>
function toggleDropdown() {
var dropdownContent = document.getElementById("dropdownContent");
dropdownContent.style.display = (dropdownContent.style.display === "block") ? "none" : "block";
}
function filterItems() {
var searchInput = document.getElementById("searchInput");
var checkboxes = document.querySelectorAll('.dropdown-content label');
checkboxes.forEach(function(checkbox) {
var label = checkbox.textContent || checkbox.innerText;
if (label.toLowerCase().includes(searchInput.value.toLowerCase())) {
checkbox.style.display = "block";
} else {
checkbox.style.display = "none";
}
});
}
window.onclick = function(event) {
if (!event.target.matches('#dropdownBtn') && !event.target.closest('.dropdown')) {
var dropdownContent = document.getElementById("dropdownContent");
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
}
}
}
</script>
</body>
</html>