Comment - Menu de recherche
Apprenez à créer un menu de recherche pour filtrer les liens avec JavaScript.
Menu Recherche/Filtre
Comment rechercher des liens dans un menu de navigation :
Contenu de la page
Commencez à saisir une catégorie/un lien spécifique dans la barre de recherche pour "filtrer" les options de recherche.
Du texte.. Du texte.. Du texte.. Du texte.. Du texte.. Du texte.. Du texte.. Du texte..
Un autre texte..Un texte..Un texte..Un texte..Un texte..Un texte..Un texte..Un texte..
Du texte..
Créer un menu de recherche
Étape 1) Ajoutez du HTML :
Exemple
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
Remarque : nous utilisons href="#" dans cette démo car nous n'avons pas de page vers laquelle la lier. Dans la vraie vie, cela devrait être une véritable URL vers une page spécifique.
Étape 2) Ajoutez CSS :
Stylisez le champ de recherche et le menu de navigation :
Exemple
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation
menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
Étape 3) Ajoutez JavaScript :
Exemple
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
for (i = 0; i <
li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
</script>
Conseil : Supprimez toUpperCase() si vous souhaitez effectuer une recherche sensible à la casse.
Conseil : consultez également Comment filtrer les tables .
Conseil : consultez également Comment filtrer les listes .