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 ?
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.
les id de ton html (list-project) et de ton JS (list_projets) ne sont pas les memes :).
... /se cache
Merci
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>lol ... tu as trouvé ?