11521 sujets

JavaScript, DOM et API Web HTML5

Barre de recherche par mot clé

Bonjour à tous,
Pour faire court, je suis débutante en javascript et ça va faire 3 jours que je bloque. J'ai réalisé une page web avec une galerie de photo de robes sous forme de liste contenant les noms de chaque robe. J'ai ensuite ajouté une barre de recherche qui me permet d'entrer le nom d'une robe et de m'afficher les photos correspondante et de cacher toutes les autres. Cependant, si je n'entre pas le nom exact et complet rien ne s'affiche. Par exemple, pour une robe La Sposa, si je mets juste sposa elle ne sort pas. Pourriez vous m'aider svp. Merci par avance.http://
Voici l'html:

<html>
<head>
<link rel="stylesheet" href="../CSS/styleGallerie.css"/>
<link rel="shortcut icon" href="../Img/logo.ico">
<TITLE> Nos Robes/Esma Robes </TITLE>
</HEAD>
<body>
<h1>Esma Robes</h1>
<span style="line-height:-50pt;"/>
<h2>Nos Robes</h2><BR>
<BR>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="../js/Rechercher.js"/>
</script>
<div id="Recherher">
  <input class="typeahead" type="text" placeholder="Rechercher" OnKeyPress="if (event.keyCode == 13)recherche()" > <!--OnKeyPress="if (event.keyCode == 13)recherche()" > permet de valider avec la touche entrer du clavier-->
</div>

<input type = 'submit' value = 'Rechercher' id = 'boutonEnvoi' OnClick="recherche()">


<ul class="ulaffiche" >
	<li><div><a href="../Img/M1.jpg"><img src="../Img/M1.jpg">La Sposa</img></a></div></li>
    <li><div><a href="../Img/M2.jpg"><img src="../Img/M2.jpg">La Sposa</img></a></div></li>
	<li><div><a href="../Img/M3.jpg"><img src="../Img/M3.jpg">La Sposa</img></a></div></li>
	<li><div><a href="../Img/M4.jpg"><img src="../Img/M4.jpg">Mac Duggal Candlelight</img></a></div></li>
	<li><div><a href="../Img/M5.jpg"><img src="../Img/M5.jpg">Mac Duggal Candlelight</img></a></div></li>
	<li><div><a href="../Img/M6.jpg"><img src="../Img/M6.jpg">Princesse Fara</img></a></div></li>
    <li><div><a href="../Img/R1.jpg"><img src="../Img/R1.jpg">Tarik Ediz Corail</img></a></div></li>
    <li><div><a href="../Img/R2.jpg"><img src="../Img/R2.jpg">Stone Bleu</img></a></div></li>
	<li><div><a href="../Img/R3.jpg"><img src="../Img/R3.jpg">Black Crystal</img></a></div></li>
	<li><div><a href="../Img/R4.jpg"><img src="../Img/R4.jpg">Robe Sofia</img></a></div></li>
	<li><div><a href="../Img/R5.jpg"><img src="../Img/R5.jpg">Sherri Hill Emmeraude</img></a></div></li>
	<li><div><a href="../Img/R6.jpg"><img src="../Img/R6.jpg">Inspiration Tarik Ediz Blanche</img></a></div></li>
	<li><div><a href="../Img/R7.jpg"><img src="../Img/R7.jpg">Inspiration Tarik Ediz Blanche</img></a></div></li>
	<li><div><a href="../Img/R8.jpg"><img src="../Img/R8.jpg">Stone Champagne</img></a></div></li>
	<li><div><a href="../Img/R9.jpg"><img src="../Img/R9.jpg">Noire Cap</img></a></div></li>
	<li><div><a href="../Img/R10.jpg"><img src="../Img/R10.jpg">Robe Sana</img></a></div></li>
	<li><div><a href="../Img/R11.jpg"><img src="../Img/R11.jpg">Jovani Bleu Roi</img></a></div></li>
	<li><div><a href="../Img/R12.jpg"><img src="../Img/R12.jpg">Bleu Orient</img></a></div></li>
	<li><div><a href="../Img/R13.jpg"><img src="../Img/R13.jpg">Rouge Orient</img></a></div></li>
	<li><div><a href="../Img/R14.jpg"><img src="../Img/R14.jpg">Chaplin</img></a></div></li>
	<li><div><a href="../Img/R15.jpg"><img src="../Img/R15.jpg">Black Crystal</img></a></div></li>
	<li><div><a href="../Img/R16.jpg"><img src="../Img/R16.jpg">Jovani Jaune</img></a></div></li>
	<li><div><a href="../Img/R17.jpg"><img src="../Img/R17.jpg">Pearl</img></a></div></li>
	<li><div><a href="../Img/R18.jpg"><img src="../Img/R18.jpg">Pearl</img></a></div></li>
	<li><div><a href="../Img/R19.jpg"><img src="../Img/R19.jpg">Inspiration Tarik Ediz Blanche</img></a></div></li>
	<li><div><a href="../Img/R20.jpg"><img src="../Img/R20.jpg">Stone Champagne</img></a></div></li>
	<li><div><a href="../Img/R21.jpg"><img src="../Img/R21.jpg">Tarik Ediz </img></a></div></li>
	<li><div><a href="../Img/R22.jpg"><img src="../Img/R22.jpg">Tarik Ediz Corail</img></a></div></li>
	<li><div><a href="../Img/R23.jpg"><img src="../Img/R23.jpg">Chaplin</img></a></div></li>
	<li><div><a href="../Img/R24.jpg"><img src="../Img/R24.jpg">Robe Sofia</img></a></div></li>
	<li><div><a href="../Img/R25.jpg"><img src="../Img/R25.jpg">Rose Cap</img></a></div></li>
	<li><div><a href="../Img/R26.jpg"><img src="../Img/R26.jpg">Stone Violine</img></a></div></li>
</ul>
 
</body>
<footer>

<nav>
<a href="EsmaRobes.html">Accueil </a>

<a href="tarif.html">Tarifs </a>

<a href="planning.html">Agenda </a>

<a href="contact.html">Me Contacter </a>
</nav>
</footer>
</html>


Et voici le javascript:

function recherche(){
	var t = document.getElementsByClassName("typeahead")[0].value; //le[0] permet de voir tous les élemnts de la liste (les enfants)
	var tb = document.getElementsByClassName("ulaffiche")[0].children ;
	
	for(i=0; i<tb.length;i++){
	if (tb[i].textContent.toUpperCase() != t.toUpperCase() && t.toUpperCase()!= null && t.toUpperCase() != "" ){
		$(tb[i]).hide();
	}
	else $(tb[i]).show();
	}
	
};
Bonjour,
Essaye avec indexOf() cela devrai marcher mais c'est assez limité

if (t.toUpperCase()!= null && t.toUpperCase() != ""  && tb[i].textContent.toUpperCase().indexOf(t.toUpperCase()) == -1){
}
Meilleure solution
Merci infiniment! Tout fonctionne à merveille! J'avais effectivement pensé à utiliser indexOf mais peux tu me dire pourquoi on teste l'égalité avec -1 stp? Merci
J'ai aussi un autre problème... mon css me permet de voir mes miniatures, de faire un focus en passant la souris dessus et de l'afficher seule en fenêtre quand on clique. Je voudrais pouvoir ajouter des flèches "précédent" et "suivant" de chaque coté de la photo une fois qu'on la ouverte pour pouvoir passer de photo en photo sans avoir à retourner sur la galerie de miniature. Je suppose que c'est aussi du javascript... j'ai trouvé pas mal de sujet ressemblant au mien mais les flèches se mettent sur la page où on voit les miniatures et non sur chaque photo une fois ouverte. Je sais pas si c'est assez clair Smiley rolleyes
Sujet clos
Aller à