Discussion :

[djo007]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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"> &lt;= D&eacute;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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci d'avance

Cordialement

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this)

[djo007]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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..

[SpaceFrog]

Teste ceci ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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)

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 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..

[djo007]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...