La barre de recherche ne fonctionne pas dans JQuery

Question

J'ai simplement créé une barre de recherche en utilisant JQuery seul problème est qu'il cache tout, même lorsque j'ai entré le nom correct et pour une raison quelconque lorsque je supprime l'entrée, il ne retourne pas les éléments cachés.

Toute aide serait appréciée.

$("#search").keyup(function(){ 
    var uInput = $("#search").val(); 
    var id = $(".gali").attr("id"); 
    if (uInput != id){ 
     $(".gali").hide(); 
    } else { 
     $(".gali").show(); 
    } 
}); 

    <div id="container"> 
     <div id="search-bar"> 
      <input type="text" placeholder="Search..." id="search"> 
     </div> 

     <ul id="pList"> 
      <li class="gali"> 
       <img src="phot/plum01.jpg" class="pimg"> 
      </li> 
      <li class="gali"> 
       <img src="phot/plum02.jpg" class="pimg"> 
      </li> 
      <li class="gali" id="flowers"> 
       <img src="phot/plum03.jpg" class="pimg"> 
      </li> 
      <li class="gali"> 
       <img src="phot/plum04.jpg" class="pimg"> 
      </li> 
      <li class="gali" id="flowers"> 
       <img src="phot/plum05.jpg" class="pimg"> 
      </li> 
      <li class="gali" id="flowers"> 
       <img src="phot/plum06.jpg" class="pimg"> 
      </li> 
      </ul> 

Answer 1

Vous pourriez avoir plusieurs class="gali" éléments sur votre page.

$('.gali').hide() et $('.gali').show() cacheront ou montreront tous ces éléments.

Pour éviter cela, vous pouvez mettre en œuvre une boucle et de vérifier tous les éléments class="gali" individuellement:

$('.gali').each(function(){ 
    var $this = $(this); 
    if($this.attr('id') == uInput.val()) { 
     $this.show(); 
    } else { 
     $this.hide(); 
    } 
}); 

EDIT: Ou, comme Santi suggère ci-dessous, il y a une meilleure solution: cacher tous class="gali" éléments, puis montrer la un avec l'identifiant en question.

$(".gali").hide(); 
$("#"+id).show(); 

Avec ce code, si votre identifiant n'existe pas, il ne sera tout simplement pas affiché.