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>

Explication de l'exemple :

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 within it.

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

Step 2 - Add CSS:

/* Menu button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Bouton du menu déroulant au survol de la souris et au focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Champ de recherche */
#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;
}
/* Lorsque le champ de recherche obtient le focus / est cliqué */
#myInput:focus {outline: 3px solid #ddd;}
/* Conteneur <div> - utilisé pour positionner le contenu du menu déroulant */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Contenu du menu déroulant (par défaut, il est caché) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Liens à l'intérieur du menu déroulant */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Modifie la couleur du lien du menu déroulant au survol de la souris */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Affiche le menu déroulant (lorsque l'utilisateur clique sur le bouton du menu déroulant, utilisez JS pour ajouter ce classe au conteneur .dropdown-content) */
.show {display:block;}

Explication de l'exemple :

Nous avons conçu le bouton du menu déroulant, y compris la couleur de fond, les marges internes, l'effet de survol, etc.

.dropdown la classe position:relativecar nous voulons que le contenu du menu déroulant soit exactement en dessous du bouton du menu déroulant (en utilisant position:absolute mise en œuvre).

.dropdown-content contient le menu déroulant réel. Par défaut, il est caché et s'affiche lors du survol (voir ci-dessous). Notez quemin-width est réglé sur 230px. Vous pouvez le modifier selon vos besoins. Astuce : si vous souhaitez que la largeur du contenu du menu déroulant soit égale à celle du bouton du menu déroulant, vous pouvez width réglé sur 100% (et overflow Réglé sur auto pour activer le défilement sur les écrans小屏幕.

Le champ de recherche (#myInput) a été conçu pour s'adapter à l'intérieur du menu déroulant. Nous avons ajouté une icône de recherche à gauche du champ de recherche pour indiquer qu'il s'agit en réalité d'un champ de recherche.

Étape 3 - Ajouter JavaScript :

/* Lorsque l'utilisateur clique sur le bouton, bascule entre l'hidden et le visible du contenu du menu déroulant */
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";
    }
  }
}

Essayer personnellement

Pages associées

Tutoriel :Menu déroulant CSS

Tutoriel :Comment créer un menu déroulant avec survol