How to search/filter dropdown menu

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

Create 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>

Exempel på förklaring:

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

Create a dropdown menu using a container element (such as <div>) and add the dropdown menu links inside it.

Wrap the button and another <div> element with a <div> to properly position the dropdown menu using CSS.

Step 2 - Add CSS:

/* Dropdown menu button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* När rullgardinsmenyns knapp hoveras över eller fokuseras */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Sökfält */
#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;
}
/* När sökfältet får fokus eller klickas på */
#myInput:focus {outline: 3px solid #ddd;}
/* Kontainer <div> - används för att positionera innehållet i rullgardinsmenyn */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Innehållet i rullgardinsmenyn (standard är dold) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Länkar inom rullgardinsmenyn */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Ändra färgen på länkar när muspekaren hovers över rullgardinsmenyn */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Visa rullgardinsmenyn (när användaren klickar på rullgardinsmenyns knapp, lägg till detta klass till .dropdown-content-container) */
.show {display:block;}

Exempel på förklaring:

vi har designat rullgardinsknappen med stil, inklusive bakgrundsfärg, innervåg, hover-effekter osv.

.dropdown klassen används position:relativedärför att vi vill att rullgardinsinnehållet ska ligga exakt under rullgardinsknappen (genom att använda position:absolute implementeras).

.dropdown-content klassen innehåller den faktiska rullgardinsmenyn. Som standard är den dold och visas när den hålls över (se nedan). Observera attmin-width är satt till 230px. Du kan ändra det efter behov. Tips: Om du vill att rullgardinsinnehållet ska vara lika brett som rullgardinsknappen, kan du sätta width sätt till 100% (och overflow Sätt till auto för att aktivera rullning på små skärmar).

Sökfältet (#myInput) har redan designats med stil för att passa in i rullgardinsmenyn. Vi har lagt till en sökikon till vänster i sökfältet för att indikera att det här är en sökfält.

Steg tre - Lägg till JavaScript:

/* När användaren klickar på knappen växlas mellan att dölja och visa innehållet i rullgardinen */
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";
    }
  }
}

Prova själv

Relaterade sidor

Tutorial:CSS-nedrullningsmeny

Tutorial:Hur man skapar en hopparlig nedrullningsmeny