How to search/sort the dropdown menu

Learn how to search for items in a dropdown menu using CSS and JavaScript.

Create a clickable dropdown menu

Create a dropdown menu that appears when the user clicks the button.

Step 1 - Add HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

Example Explanation:

You can use any element to open the dropdown menu, such as a <button>, <a>, or <p> element.

Use a container element (such as <div>) to create the dropdown menu and add the dropdown menu links within it.

Wrap the button and another <div> element with a <div> to use CSS for accurate dropdown menu positioning.

Step 2 - Add CSS:

/* Dropdown menu button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Dropdown menu button on hover and focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Search field */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
/* When the search box is focused or clicked */
#myInput:focus {outline: 3px solid #ddd;}
/* Container <div> - used to position the dropdown menu content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown menu content (default is hidden) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Links within the dropdown menu */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change the color of the dropdown menu link when the mouse hovers over it */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Display the dropdown menu (when the user clicks the dropdown menu button, use JS to add this class to the .dropdown-content container) */
.show {display:block;}

Example Explanation:

We have styled the dropdown menu button, including background color, padding, hover effects, etc.

.dropdown class to use position:relativebecause we want the dropdown content to be exactly below the dropdown menu button (using position:absolute implementation).

.dropdown-content class to contain the actual dropdown menu. By default, it is hidden and will be displayed when hovered over (see below). Note thatmin-width is set to 230px. You can modify it as needed. Tip: If you want the width of the dropdown content to be the same as the dropdown menu button, you can set width Set to 100% (and overflow Set to auto to enable scrolling on small screens).

The search box (#myInput) has been styled to fit within the dropdown menu. We have added a search icon on the left side of the search box to indicate that this is actually a search box.

Step 3 - Add JavaScript:

/* Toggle the hide and show of the dropdown content when the user clicks the button */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

Try it yourself

Related Pages

Tutorial:CSS Dropdown Menu

Tutorial:How to Create a Hoverable Dropdown Menu