rendez-vous sur ArraKISS
Blog Archives Contact
whoami@ybad.name
# find . -iname

    Filtre à la dmenu en javascript

    Sur la page d’archives de ce site ainsi que sur toutes les pages, je propose de filtrer/rechercher les liens dans un menu. Lorsque l’utilisateur entre quelques lettre, ne sont affichés que les liens contenant ce que l’utilisateur a écrit.

    Par exemple, avec les liens suivants : “pizza, orange, gerbille”, si l’utilisateur écrit “pi” alors seul le lien “pizza” sera affiché. Vous pouvez essayer dans le “terminal” en haut de cette page pour voir.

    C’est un peu ainsi que fonctionne dmenu.

    Voici comment je le fais dans une page web.

    HTML

    Tout d’abord, il faut mettre les liens dans un conteneur. Le plus pratique est d’utiliser un “id” spécifique. Par exemple :

    <nav id="navlinks">
        <a href="/a.html">a</a>
        <a href="/b.html">b</a>
        <a href="/c.html">c</a>
    </nav>
    

    J’ai mis un <nav>, ça peut être n’importe quel conteneur (<div> par exemple).

    Ensuite, on place un champ pour que l’utilisateur puisse entrer du texte. Ce champ appellera une fonction FilterConsole lorsque l’utilisateur enlève son doigt d’une touche:

    <input type="text" id="consolefilter" onkeyup="FilterConsole()">
    

    Il est important de donner un “id” précis à ce champ.

    JS

    Voici la fonction FilterConsole qui se charge de cacher les éléments ne correspondant pas à la recherche. Je commente le code ci-dessous.

    function FilterConsole()
    {
    /* les variables dont on aura besoin */
    var input, filter, links, a, i, txtValue;
    
    /* 
    on récupère le champ de recherche grâce
    à son id 
    */
    input = document.getElementById("consolefilter");
    /* On transforme l'entrée en majuscules */
    filter = input.value.toUpperCase();
    /* 
    on récupère tous les liens dans le conteneur
    dont l'id est "navlinks" 
    */
    links = document.getElementById("navlinks").getElementsByTagName("a");
    
    /*
    Pour chacun des liens, on vérifie s'il contient le texte
    entrée par l'utilisateur.
    Si non, on le cache en changeant son attribut "display"
    */
    for (i = 0; i < links.length; i++) {
    	a = links[i];
    	txtValue = a.textContent || a.innerText;
    	txtValue += ' ' + a.href;
    	if (txtValue.toUpperCase().indexOf(filter) > -1) {
    		links[i].style.display = "";
    	} else {
    		links[i].style.display = "none";
    	}
    }
    }
    

    Et voilà!