Discussion :

[Livingstone]

Bonjour,

J'ai un problème au sujet de l'autocomplete via jQuery.
J'ai suivi le tutoriel de ce site : http://blog.arnaud-k.fr/2009/04/28/t...jquery-et-php/.

Tout fonctionne parfaitement lorsqu'il n'y a qu'un seul champ sur lequel on veut appliquer l'autocomplete.
Mon problème est lorsqu'il y a deux (ou plus) champs.
Je ne rencontre pas de problème sur la méthode lookup, lorsque j'entre les premières lettres, la liste générée apparaît bien sous le textfield.
Le problème se situe au niveau de la méthode fill().

Le site propose cette méthode quand il n'y a qu'un champ à autocomplete :

Code :

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

1
2
3
4
5
 
function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
	$('#inputString').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
}

Et comme élément HTML correspondant :

Code html :

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

1
2
3
4
5
6
 
<input type="text" size="30" value="" id="inputString" />
 
<div class="suggestionsBox" id="suggestions" style="display: none;">
		<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions --></div>
</div>

De mon côté j'ai deux champs text :

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
 
<input type="text" size="30" value="" id="A" />
 
<div class="suggestionsBox" id="suggestionsA" style="display: none;">
		<div class="suggestionList" id="autoSuggestionsListA"><!-- liste contenant les suggestions A--></div>	
</div>
 
<br><br>
 
<input type="text" size="30" value="" id="B" />
 
<div class="suggestionsBox" id="suggestionsB" style="display: none;">
		<div class="suggestionList" id="autoSuggestionsListB"><!-- liste contenant les suggestions B--></div>
</div>

J'ai essayé plusieurs possibilités sur la méthode fill() comme :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function fill(thisValue) {
   if (document.getElementbyId('A').value != null) {
	$('#inputStringA').val(thisValue);
	setTimeout("$('#suggestionsA').hide();", 200);
   }
   else if (document.getElementbyId('B').value != null) {
	$('#inputStringB').val(thisValue);
	setTimeout("$('#suggestionsB').hide();", 200);
   }
}

Mais ça ne marche pas...
J'ai essayé de créer deux méthodes du genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function fill(thisValue) { 
	$('#inputStringA').val(thisValue);
	setTimeout("$('#suggestionsA').hide();", 200);
}
 
function fill2(thisValue) {
	$('#inputStringB').val(thisValue);
	setTimeout("$('#suggestionsB').hide();", 200);
}

En appelant bien sûr fill2() sur le onblur du textField B.
Mais fill2() n'est pas appelé.

Si quelqu'un a une idée je suis preneur car je tourne en rond depuis quelques jours jours...
Merci.

[danielhagnoul]

Bonsoir

Le lien donné en référence date de 2009, c'est obsolète.

Il n'y a pas de méthode "fill" dans l'API de UI Autocomplete.

Pour les démonstrations et l'API.

Un autocomplete est lié à un seul champ de recherche.

[Livingstone]

Donc vous voulez dire qu'actuellement il n'est pas possible d'avoir plus d'un seul champs de recherche avec l'autocomplete de JQuery ??

Cela me parait incroyable que dans un formulaire muni de plusieurs textfields, il ne soit pas possible de les équiper tous de l'autocomplete.

Quelqu'un pourrait-il confirmer ou infirmer cela, svp ?

[Bovino]

Personne n'a jamais dit ça...

Un autocomplete est lié à un seul champ de formulaire.
Cela signifie qu'une même instance du plugin ne peut interagir qu'avec un champ, mais il est possible d'avoir plusieurs instances du plugin actives sur une même page, mais ces instances ne partagent aucune information par défaut...

[Livingstone]

OK Bovino, merci de votre réponse.
Plusieurs instances du plugin sur la même page.
C'est-à-dire ? Je dois importer plusieurs fois le jquery1.9.1.js dans ma page ??
Je n'ai pas bien compris ce que vous avez expliqué.
Est-il possible de m'éclairer davantage, svp ?

Merci pour votre réponse.

[Bovino]

Mais non... il ne faut pas importer plusieurs fois la librairie, ça ne rimerait à rien et chaque nouvelle déclaration écraserait la précédente.

Code :

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

1
2
$('#element1').autocomplete();
$('#element2').autocomplete();

et voilà, deux instances sont créées sur deux éléments différents.

EDIT
Mais comme souvent, utiliser jQuery en croyant pouvoir faire l'impasse sur l'apprentissage de JavaScript est une mauvaise idée : avant d'utiliser une librairie, il est important de connaitre et comprendre les concepts de base de la programmation JavaScript.

[Livingstone]

Un autocomplete est lié à un seul champ de recherche.

La méthode qui s'appelle lookup utilisée dans le tutorial que j'ai mis en lien utilise un autocomplete par textfield.
Cette partie fonctionne très bien.
Je veux dire que la liste générée sous le textfield correspond exactement à ce que je veux.
C'est ensuite que cela se complique.
Je ne parviens pas à sélectionner dans la liste générée l'item de mon choix et par suite qu'il se copie dans le textfield.
La liste reste affichée et toutes les actions que j'essaie de faire ne font rien dessus.
La méthode marche pour 1 textfield (c'est-à-dire de choisir un élément de la liste et ensuite il se place dans le textfield et la liste disparaît) mais pas pour 2 textfields.
Dans le tutorial, c'est la méthode fill qui est censée faire cela.
J'ai essayé de l'adapter pour deux textfields différents comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function fill(thisValue) {
 if (document.getElementById('textfieldA') != "" {
        $('#textfieldA').val(thisValue);
	setTimeout("$('#suggestionsA').hide();", 200);
}
else if (document.getElementById('textfieldB') != "" {
        $('#textfieldB').val(thisValue);
	setTimeout("$('#suggestionsB').hide();", 200);
}
}

Mais ça ne fonctionne pas.
J'ai remplacé le

Code :

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

1
2
 
document.getElementById('textfieldA')

par

Code :

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

1
2
 
$("#textFieldA").val() != ""

Mais ça ne change rien.
C'est là-dessus que je bloque.