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>

Eksempel Forklaring:

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 use CSS to position the dropdown menu correctly.

Step 2 - Add CSS:

/* Dropdown menu button */
.dropbtn {}}
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Dropdown-menu knappen når musen hæves eller fokuseres på */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Søgefelt */
#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øgefeltet får fokus eller blive klikket på */
#myInput:focus {outline: 3px solid #ddd;}
/* Beholderen <div> - bruges til at placere indholdet af dropdown-menuen */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Indholdet af dropdown-menuen (standardvis er det skjult) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Links i dropdown-menuen */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Ændrer farven på linket, når musen hæves over dropdown-menuen */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Viser dropdown-menu (når brugeren klikker på dropdown-menu knappen, brug JS til at tilføje dette til .dropdown-content beholderen) */
.show {display:block;}

Eksempel Forklaring:

vi har designet rullegardinmenuens knap med stil, herunder baggrundsfarve, indrykning, museoverførselseseffekter osv.

.dropdown klassen bruges position:relativedette skyldes, at vi ønsker, at rullegardinindholdet skal placeres præcis under rullegardinmenuens knap (ved hjælp af position:absolute implementering).

.dropdown-content klassen indeholder den faktiske rullegardinmenu. Som standard er den skjult og vises ved museoverførsel (se nedenfor). Bemærk,min-width er sat til 230px. Du kan ændre det efter behov. Tip: Hvis du vil have rullegardinindholdets bredde at være den samme som rullegardinmenuens knap, kan du sætte width sæt til 100% (og) overflow Sæt til auto for at aktivere rulning på små skærme).

Søgefeltet (#myInput) er blevet designet med stil til at passe ind i rullegardinmenuen. Vi har tilføjet en søgeikon, der er placeret til venstre i søgefeltet, for at indikere, at dette faktisk er et søgefelt.

Trin 3 - Tilføj JavaScript:

/* Når brugeren klikker på knappen, skifter den mellem skjult og vist for indholdet i rullegardinmenuen */
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";
    }
  }
}

Prøv det selv

Related pages

Tutorial:CSS dropdown menu

Tutorial:How to create a hoverable dropdown menu