How to Search for Items in a Dropdown Menu using CSS & JavaScript?
In many web apps, dropdown menus offer a list of options for users. When the list is long, finding a specific item can be hard. To make this easier, we can add a search function to the dropdown menu. In this article we will explore how we can add search functionality in dropdown menu using CSS and JavaScript.
Approach:
- Create a div element to serve as the container for the dropdown menu.
- Include a button element to trigger the display of the dropdown menu when clicked.
- Inside the dropdown container add an input element for searching the items.
- Use a div element to contain the list of dropdown options. Each option is represented by a div element.
- Style the dropdown using css.
- Implement toggleDropdown function that toggles the visibility of the dropdown button.
- Add an event listener to the search input field that listens for input events. Then function filters the dropdown items based on the search query.
Example: To demonstrate searching for items in a dropdown menu using CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Dropdown Search</title>
<style>
.dropdown {
position: relative;
display: inline-block;
width: 200px;
}
.dropdown-button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown-button .icon {
margin-left: 10px;
}
#dropdownSearch {
width: 100%;
box-sizing: border-box;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
}
#dropdownItems {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
max-height: 200px;
overflow-y: auto;
}
.dropdown-item {
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
cursor: pointer;
}
.dropdown-item:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-button"
onclick="toggleDropdown()">Select Country▼
</button>
<div id="dropdownItems">
<input type="text"
id="dropdownSearch"
placeholder="Search...">
<div class="dropdown-item">Afghanistan</div>
<div class="dropdown-item">Albania</div>
<div class="dropdown-item">Algeria</div>
<div class="dropdown-item">Andorra</div>
<div class="dropdown-item">Angola</div>
<div class="dropdown-item">Argentina</div>
<div class="dropdown-item">Armenia</div>
<div class="dropdown-item">Australia</div>
<div class="dropdown-item">Austria</div>
<div class="dropdown-item">Azerbaijan</div>
<div class="dropdown-item">Bahamas</div>
<div class="dropdown-item">Bahrain</div>
<div class="dropdown-item">Bangladesh</div>
<div class="dropdown-item">Barbados</div>
<div class="dropdown-item">Belarus</div>
<div class="dropdown-item">Cabo Verde</div>
<div class="dropdown-item">Cambodia</div>
<div class="dropdown-item">Cameroon</div>
<div class="dropdown-item">Chad</div>
<div class="dropdown-item">Chile</div>
<div class="dropdown-item">China</div>
<div class="dropdown-item">Colombia</div>
<div class="dropdown-item">India</div>
</div>
</div>
<script>
function toggleDropdown() {
const dropdownItems = document
.getElementById('dropdownItems');
dropdownItems.style.display = dropdownItems
.style
.display === 'block' ? 'none' : 'block';
}
document
.getElementById('dropdownSearch')
.addEventListener('input', function ()
{
const filter = this
.value
.toUpperCase();
const items = document
.getElementsByClassName('dropdown-item');
for (let i = 0; i < items.length; i++) {
const item = items[i];
const txtValue = item.textContent || item.innerText;
item
.style
.display = txtValue
.toUpperCase()
.includes(filter) ? '' : 'none';
}
});
document
.addEventListener('click', function (event)
{
const dropdown = document
.querySelector('.dropdown');
if (!dropdown.contains(event.target))
{
document
.getElementById('dropdownItems')
.style
.display = 'none';
}
});
document
.getElementById('dropdownItems')
.addEventListener('click', function (event)
{
event.stopPropagation();
});
</script>
</body>
</html>
Output:
Search of Items in a drop down menu
Contact Us