Discussion :

[CinePhil]

Bonjour,

Dans un formulaire, j'ai mis quasiment le même programme pour trois autocomplete avec inerrogation de la BDD pour proposer à l'utilisateur des villes, selon le pays qu'il a choisi :
- pays de naissance => ville de naissance ;
- pays de l'adresse actuelle => ville de l'adresse actuelle ;
- pays de l'adresse pendant les études => ville de l'adresse pendant les études.

J'ai un seul programme PHP qui interroge la BDD selon le pays et le début du nom de la ville pour les trois autocomplete et les seules choses qui changent dans la partie Ajax sont le nom de l'input de la ville sur lequel porte l'autocomplete et celui du select du pays :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/**
 * JQuery.ui Autocomplete pour la ville de naissance
 * @abstract : Gère l'autocomplétion lors de la saisie de la ville de naissance en fonction du pays pré-sélectionné
 */
$( function() {
	$("#villeNaissance").autocomplete({ /* ou bien #apaVille (adresse postale actuelle) ou #apeVille (adresse pendant les études) */
		minLength: 3,
		source: function(request, response)
		{
			var idPays = $("#paysNaissance").val(); /* ou bien #apaPays (adresse postale actuelle) ou #apePays (adresse pendant les études) */
			var objData = {};
 
			objData = {pays: idPays, debutVille: request.term};
 
			$.ajax({
				url: 'http://localhost/pef/fr/Inscription/aj_cherche_ville',
				dataType: "json",
				data: objData,
				type: 'POST',
				success: function (liste_villes)
				{
					response($.map(liste_villes, function(item)
					{
						return {
							label: item.vilNom + '(' + item.vilDpt + ')',
							value: item.vilNom + '(' + item.vilDpt + ')'
						}
					}));
				}
			});
		},
		minLength: 3,
		delay: 600
	});
});

Le code est actuellement copié 3 fois avec les noms des contrôles différents mais y a t-il moyen de factoriser ça en un seul code ?

[Marco46]

Je ne sais pas si ça fonctionne avec ton code mais l'idée c'est de faire une factory function :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
 
function makeAutoComplete(autoCompleteFieldId, paysFieldId) {
    $(autoCompleteFieldId).autocomplete({ /* ou bien #apaVille (adresse postale actuelle) ou #apeVille (adresse pendant les études) */
        source: function(request, response)
        {
            var idPays = $(paysFieldId).val(); /* ou bien #apaPays (adresse postale actuelle) ou #apePays (adresse pendant les études) */
            var objData = {};
 
            objData = {pays: idPays, debutVille: request.term};
 
            $.ajax({
                url: 'http://localhost/pef/fr/Inscription/aj_cherche_ville',
                dataType: "json",
                data: objData,
                type: 'POST',
                success: function (liste_villes)
                {
                    response($.map(liste_villes, function(item)
                    {
                        return {
                            label: item.vilNom + '(' + item.vilDpt + ')',
                            value: item.vilNom + '(' + item.vilDpt + ')'
                        }
                    }));
                }
            });
        },
        minLength: 3,
        delay: 600
    });
}

Et le code appelant :

Code :

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

1
2
3
4
 
makeAutoComplete('#villeNaissance', '#paysNaissance');
makeAutoComplete('#apaVille', '#apaPays');
makeAutoComplete('#apeVille', '#apePays');

C'est l'idée générale. Je ne sais pas si $(fieldId).autocomplete(config) retourne une référence du widget mais si oui ça vaudrait le coup de rajouter un return pour faire :

Code :

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

1
2
3
4
 
var autoComplete1 = makeAutoComplete('#villeNaissance', '#paysNaissance');
var autoComplete2 = makeAutoComplete('#apaVille', '#apaPays');
var autoComplete3 = makeAutoComplete('#apeVille', '#apePays');

A vérifier dans la doc donc

Sinon tu as minLength qui est déclaré 2 fois.

[CinePhil]

Merci pour la réponse.
Je suis loin d'être un spécialiste de JQuery mais si j'ai compris la syntaxe, $( function() signifie que c'est une fonction qui s'applique à la page et que c'est ensuite le contrôle indiqué dans la fonction par $("#idControle") qui dit à quel contrôle s'applique la fonction.

Par contre, quand on écrit function makeAutoComplete(autoCompleteFieldId, paysFieldId), on déclare une fonction qui doit être lancée par quelque chose (typiquement, un événement sur la page).

Du coup, où mets-je ton code ?

Code :

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

1
2
3
makeAutoComplete('#villeNaissance', '#paysNaissance');
makeAutoComplete('#apaVille', '#apaPays');
makeAutoComplete('#apeVille', '#apePays');

Dans une $(function() ?

Par contre, je ne vois pas du tout à quoi sert ton dernier bout de code et je ne comprends pas le texte que tu y as associé :

C'est l'idée générale. Je ne sais pas si $(fieldId).autocomplete(config) retourne une référence du widget mais si oui ça vaudrait le coup de rajouter un return pour faire :

Code :

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

1
2
3
var autoComplete1 = makeAutoComplete('#villeNaissance', '#paysNaissance');
var autoComplete2 = makeAutoComplete('#apaVille', '#apaPays');
var autoComplete3 = makeAutoComplete('#apeVille', '#apePays');

A vérifier dans la doc donc

Sinon tu as minLength qui est déclaré 2 fois.

J'essaierai quand même lundi.

[Marco46]

J'ai pas beaucoup utilisé jQuery ni jQuery UI et ça remonte vraiment à loin, tout dépend comment ton appli est architecturée.

Probablement qu'il faut mettre ça dans $(function() ?.

Pour la fin de mon post c'est pour le cas où tu aurais besoin de faire référence à tes autocompletes ailleurs dans le code mais ça n'a peut être pas de sens dans un contexte php je ne sais pas.

[Toufik83]

bonjour,
pourquoi ne pas utiliser $.each()?
puis en fonction de l'id, tu lance le traitement correspondant.
genre :

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
19
20
21
22
23
 
var id;
$('#villeNaissance,#apaVille,#apeVille')
  .each(function() {
    $(this).autocomplete({
      source: function(request, response) {
        id = $(this.element).prop("id") || this.element[0].id || $(this.element.get(0)).attr('id')
        console.log('id :' + id);
        id == 'villeNaissance' 
            ? $('#' + id).autocomplete('option', 'source', ["1", "2", "3"]) 
            : id == 'apaVille' 
                  ? $('#' + id).autocomplete('option', 'source', ['test2', 'test_2', 'test__2']) 
                  : id == 'apeVille' 
                     ? $('#' + id).autocomplete('option', 'source', ['test3', 'test_3', 'test__3']) 
                     : null;
        console.log($('#' + id).autocomplete('option', 'source'));
      }
     ,select: function(event, ui) {
        console.log("ui.item.label :" + ui.item.label + ', ui.item.value :' + ui.item.value);
      }
     ,minLength:3
    });
  });

[CinePhil]

Code :

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

1
2
3
$('#villeNaissance,#apaVille,#apeVille')
  .each(function() {
    $(this).autocomplete

Je crois que c'est plutôt ce genre de syntaxe que je cherchais. J'avais essayé de mettre les différents contrôles ensemble mais sans le each que je ne connaissais pas.
J'essaierai lundi.
Merci.