Discussion :

[CinePhil]

Bonjour,

Soit un input muni d'un autocomplete qui va chercher une liste de villes en BDD en fonction de ce qui est tapé par l'utilisateur, comme je l'explique dans mon blog.

J'ai mis en label et en value la même chose :

Code Javascript :

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

1
2
3
4
return {
							label: item.vilNom + '(' + item.vilDpt + ')', /* Construit la liste des possibilités affichées */
							value: item.vilNom + '(' + item.vilDpt + ')' /* Détermine la valeur du contrôle après sélection dans la liste */
						}

Si je mets l'identifiant de la ville en value, c'est cet identifiant qui s'affiche une fois la ville sélectionnée au lieu du label, ce qui n'est pas terrible pour l'utilisateur.

Je peux utiliser l'événement select pour reporter la valeur dans un autre champs, par exemple, un input hidden qui stockerait l'identifiant et je voudrais alors affecter à la valeur de mon champ en autocomplete le label séclectionné.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
						return {
							label: item.vilNom + ' (' + item.vilDpt + ')',
							/*value: item.vilNom + ' (' + item.vilDpt + ')'*/
							value: item.vilId
						}
/* ... */
		select: function (event, ui)
		{
			$("#"+controle_ville_id).val(ui.item.value); /* alimentation du input hidden fonctionne */
			$(this).val(ui.item.label); /* forçage de l'affichage du champ autocomplete avec le label sélectionné ne fonctionne pas */
		}

Si j'ai bien compris, l'action standard de l'événement select - afficher la valeur sélectionnée s'effectue après ce que je mets dans la fonction de l'événement select.

J'ai essayé aussi de reporter ça juste après l'autocomplete mais ça ne fonctionne pas mieux :

Code :

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

1
2
3
4
5
6
7
		}); /* Fin de $("#villeNaissance, #apaVille, #apeVille").autocomplete({ */
 
$(this).on( "autocompleteselect", function( event, ui ) 
	{
		$("#"+controle_ville_id).val(ui.item.value);
		$(this).val(ui.item.label);
	} );

Une idée à me soumettre en m'expliquant le phénomène ?

[Toufik83]

Salut,

Si je mets l'identifiant de la ville en value, c'est cet identifiant qui s'affiche une fois la ville sélectionnée au lieu du label, ce qui n'est pas terrible pour l'utilisateur.

as-tu essayé d'ajouter un return false à la fin de select ?

Code :

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

1
2
3
4
5
6
 
select: function (event, ui)
{
 ...
return false;
}

[CinePhil]

Ça marche ! Merci beaucoup !

[Toufik83]

c'est bon alors, parce que d'après ce que j'ai compris, la fonction select retourne la value par defaut , le return false est là pour empêcher ce comportement.