Afficher des div suivant un filtre

jouvrard
Javascript

Bonjour,

J'ai une série de "div" ayant chacune un "data-keywords" contenant des mots clés.
En haut de ma page j'ai un champ input classique, que je souhaite utiliser comme filtre afin d'afficher les div dont les mots-clés correspondent à ma recherche, et masquer les autres.

J'ai fait ceci:

document.getElementById('graphicFilter').addEventListener('keyup', function() {
            let myVar = this.value;
            $('[data-keywords]:contains('+ myVar +')').show('slow');
            $('[data-keywords]:not(:contains('+ myVar +'))').hide('slow');
});

Le problème est que ça ne fonctionne systémtiquement.
J'ai un div contenant les mots clés suivants: "devis créés". Si je commence à taper la lettre "d" le div disparaît alors que j'en ai un autre qui contient lui le mot "de" qui reste bien afficher.
Je ne vois vraiment pas pourquoi ça réagit de cette façon et je demande donc votre aide... :)

Merci!

6 réponses

Twentyfour
Réponse acceptée

Bien vu, je me suis fais avoir.

Voici la solution fonctionnelle et elle prend en compte la casse.

<input type="text" id="graphicFilter" />

<div data-keywords="banane">banane flambée</div>
<div data-keywords="barbe">barbe</div>
<div data-keywords="betrave">betrave</div>
<div data-keywords="bugs bunny cartoon">bugs bunny</div>
<div data-keywords="devis créés">devis créés</div>

<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="application/javascript">
document.getElementById('graphicFilter').addEventListener('keyup', function() {
    let myVar = this.value;

    $("[data-keywords]").each(function(index) {
        if ($(this).data("keywords").toUpperCase().indexOf(myVar.toUpperCase()) !== -1)
            $(this).show('slow')
        else
            $(this).hide('slow')
    })
});
</script>

Par contre si p. ex. le filtre contient "banane betrave", aucun résultat ne sera affiché.
Pour cela il va falloir adapté le code en conséquence.

Twentyfour
Réponse acceptée

De rien.
Ferme le topic si le problème est résolu. C'est toujours mieux pour un autre qui effectuerait des recherches sur ce sujet.

Twentyfour

Ton code semble correcte, chez moi il marche parfaitement.
Voici le résultat que j'ai obtenu sur Fiddle

jouvrard
Auteur

Je viens de regarder ta proposition et en effet ça fonctionne.
Par contre il ne prend pas en compte le keyword mais ce que contient le div, ce qui expliquerait mon problème... Je souhaiterais que ça cherche dans les termes du data-keywords, mais ça ne semble pas être le cas.

En effet, si je change un keyword on voit qu'il cherche toujours dans le contenu de la div, quoi qu'on mette dans le keyword.

jouvrard
Auteur

Nickel merci beaucoup, je n'avais pas pensé à l'indexOf...
Concernant ton avertissement sur le filtre pas de souci, au contraire même c'est ce que je souhaite.

Merci! :)

jouvrard
Auteur

C'est fait, merci encore.