Bonjour, je rencontre un souçis pour créer un modul de filtre en jQuery .

<input type="text" id="search" placeholder="Search project">
<ul id="list-project">
    <?php $projects = list_projets(ROOT);?>
    <?php foreach ($projects as $p):?>
        <li><a class="colored" data-name="<?= $p;?>" href="<?= '../'.$p;?>"><?= $p;?></a></li>
    <?php endforeach;?>
</ul>

$(document).ready(function(){
    $("#search").keyup(function(){
    var filter = $(this).val();
        $("#list_projets li a").each(function(){
            if ($(this).data('name').search(new RegExp(filter, "i")) < 0)
            {
                $(this).fadeOut();
            }
            else
            {
                $(this).show();
            }
            });
    });
});

Le debuger me sort aucune erreur, et pourtant il ne fonctionne pas .
Auriez vous une piste svp ?

5 réponses


Vallyan
Réponse acceptée

les id de ton html (list-project) et de ton JS (list_projets) ne sont pas les memes :).

Vallyan
Réponse acceptée

Bizarre, chez moi ton code marche très bien (note que je fais disparaitre le <li>, pas le <a>).
Je te mets ce que j'avais bricolé:

<input type="text" id="search" placeholder="Search project">
<ul id="list-project">
    <li><a class="colored" data-name="kiki" href="#">kiki</a></li>
    <li><a class="colored" data-name="toto" href="#">toto</a></li>
    <li><a class="colored" data-name="tata" href="#">tata</a></li>
    <li><a class="colored" data-name="lorem" href="#">lorem</a></li>
</ul>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#search").keyup(function(){
        var filter = $(this).val();
        $("#list-project li a").each(function(){
            if ($(this).data('name').search(new RegExp(filter, "i")) < 0)
            {
                $(this).parent().fadeOut();
            }
            else
            {
                $(this).parent().show();
            }
        });
    });
})
</script>
Benjamin Derepas
Auteur
Réponse acceptée

Oui, tu avais raison ! J'ai honte de mon erreur ...
Pour ce qui est du li a, j'ai effectivement rajouté un .parent() avant le fadeX.

... /se cache
Merci

lol ... tu as trouvé ?