Des class sur plusieurs inputs

Version imprimable

Bonjour,

j'ai un petit souci avec mon code,

je sais pas trop comment expliquer mon problème.

j'ai un formulaire avec des suggestions
le souci c'est comme je peux avoir plusieurs champs qui vont faire appel au suggestion, et bien ça fait la procédure sur les 2 champs.

une petit exemple que j'ai mis en ligne ici:http://www.osteopathe-chaumontenvexin.fr/test/
Entrez le nom d'une ville ou un code postal (la déjà vous apercevrais un problème car ça réagi sur les 2 champs)
Ensuite sélectionnez une ville dans la liste (ça entre les données dans les 2 champs ...)

voilà mon problème. j'espère avoir pu vous apporter les outils nécessaire pour que vous comprenez la ou je veux en venir.

voici le code js:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('.suggestions').hide(); } else { $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('.suggestions').show(); $('.autoSuggestionsList').html(data); } }); } } // lookup function fill(thisValue) { $('.inputString').val(thisValue); setTimeout("$('.suggestions').hide();", 200); }
et le code html:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div> <form> <div> <input type="text" size="30" value="" class="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> <label title="inputString"> <= Départ</label> </div> <div class="suggestionsBox suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="autoSuggestionsList suggestionList"></div> </div> <div> <input type="text" size="30" value="" class="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> </div> <div class="suggestionsBox suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="autoSuggestionsList suggestionList"></div> </div> </form> </div>
a titre d'information la fonction fill correspond à ce que ajax va retourner

Code:

<li onClick="fill('le nom de la ville, le code postal');">le nom de la ville, le code postal</li>

Merci d'avance

Cordialement

01/04/2013, 08h41
SpaceFrog

Code:

$(this)

j'ai jeté un œil sur $(this) mais je vois pas comment l utiliser
j'ai essayé de faire ça..
Code:

1 2 3 4 5 function fill(thisValue) { var inputString = $(this).attr('.inputString'); inputString.val(thisValue); setTimeout("$('.suggestions').hide();", 200); }
mais à priori c'est pas comme ça..

Teste ceci ...

Code:

1
2
3
4
5
6
<ul>
  <li class="foo">un</li>
  <li class="foo">deux</li>
  <li class="foo">trois</li>
  <li class="foo">quatre</li>
</ul>

Code:

1
2
3
$('.foo').click (function(){
  alert($(this).text();
})

01/04/2013, 14h26
djo007

alors je comprend maintenant la ou tu veux en venir,
ça na pas l'aire de marcher quand je rentre des infos dans le input
quand je sélectionne une ligne aucune alerte... bizar..

mais avec les <li> qu'il y a en dessous ça marche très bien..

Je t'invite à jeter un œil tu comprendras plus facilement ce que je veux dire:http://www.osteopathe-chaumontenvexin.fr/test/
(j'ai bien modifier mon fichier php)
02/04/2013, 00h17
djo007

SpaceFrog,

J'ai décidé de reprendre tout à zéro, voici ce que j'ai refais pour le moment http://jsfiddle.net/RkWhN/6/

Je me retrouve avec un problème, car ça affiche toutes les div qui ont la class suggestions qu'il y a dans la page quand tu écris dans un champ.

j'ai essayé de faire

Code:

elem.next('.suggestions').show();

afin de sélectionner la div qui suit le champ input.. mais ça marche encore moins..

EDIT:

je vais finir par régler le problème tout seule ^^ j'ai trouvé à force de réfléchir,
j'ai ajouté parents() ce qui donne http://jsfiddle.net/RkWhN/7/

Code:

elem.parents().next('.suggestions').show()

mais du coup ça ma perdu sur parents() et parent() car les 2 fonctionnes.. je comprend plus la différence entre les 2..

Je suis à bout cette fois... je me retrouve avec un autre problème http://osteopathe-chaumontenvexin.fr/test/
Quand je rentre un ville la suggestion fonctionne, mais à partir du moment ou je sélectionne la ville dans la liste ça injecte le résultat sélectionné dans les 2 champs...

Actuellement c'est comme ça
Code:

1 2 3 4 function fill(thisValue) { $('input.inputString').val(thisValue); setTimeout("$('.suggestions').hide();", 200); }
J'ai essayé de plusieurs façon...

Comme ça
Code:

1 2 3 4 function fill(thisValue) { $('input.inputString').prev().val(thisValue); setTimeout("$('.suggestions').hide();", 200); }
Comme ça
Code:

1 2 3 4 function fill(thisValue) { parents('.suggestions').parents('.champ').next('input.inputString').val(thisValue); setTimeout("$('.suggestions').hide();", 200); }
ou encore comme ça
Code:

1 2 3 4 function fill(thisValue) { parent().find('input.inputString').val(thisValue); setTimeout("$('.suggestions').hide();", 200); }
et plein d'autre encore, je pense ne pas être loin du bon... :massacre: