Comment - Liste déroulante de recherche/filtre
Découvrez comment rechercher des éléments dans un menu déroulant avec CSS et JavaScript.
Menu déroulant Filtre
Créer une liste déroulante cliquable
Créez un menu déroulant qui apparaît lorsque l'utilisateur clique sur un bouton.
Étape 1) Ajoutez du HTML :
Exemple
<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>
Exemple expliqué
Utilisez n'importe quel élément pour ouvrir le menu déroulant, par exemple un élément <button>, <a> ou <p>.
Utilisez un élément conteneur (comme <div>) pour créer le menu déroulant et ajoutez les liens déroulants à l'intérieur.
Enveloppez un élément <div> autour du bouton et du <div> pour positionner correctement le menu déroulant avec CSS.
Étape 2) Ajoutez CSS :
Exemple
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The 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;
}
/* The search field
when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
Exemple expliqué
Nous avons stylisé le bouton déroulant avec une couleur d'arrière-plan, un rembourrage, un effet de survol, etc.
La .dropdown
classe utilise position:relative
, ce qui est nécessaire lorsque nous voulons que le contenu de la liste déroulante soit placé juste en dessous du bouton déroulant (en utilisant position:absolute
).
La .dropdown-content
classe contient le menu déroulant réel. Il est caché par défaut, et sera affiché au survol (voir ci-dessous). Notez que le min-width
est défini sur 230px. N'hésitez pas à changer cela. Conseil : Si vous souhaitez que la largeur du contenu de la liste déroulante soit aussi large que le bouton de la liste déroulante, définissez le width
sur 100 % (et overflow:auto
pour activer le défilement sur les petits écrans).
Le champ de recherche (#myInput) est stylisé pour tenir dans le menu déroulant. Nous avons ajouté une icône de recherche, qui est placée à gauche à l'intérieur du champ de recherche pour indiquer qu'il s'agit en fait d'un champ de recherche.
Étape 3) Ajoutez JavaScript :
Exemple
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
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";
}
}
}
Conseil : accédez à notre didacticiel CSS Dropdowns pour en savoir plus sur les listes déroulantes.
Conseil : accédez à nos listes déroulantes hoverables pour en savoir plus sur les listes déroulantes hoverables