Trois fois le même autocomplete. Factorisable ?

Version imprimable

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:

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 ?

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

Code:

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:

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:

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.

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 ?
Citation:
Code:

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é :
Citation:
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:

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.

07/10/2017, 10h18
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.

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

Code:

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
    });
  });

08/10/2017, 10h37
CinePhil
Citation:
Code:

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.
09/10/2017, 09h17
SpaceFrog

Code:

$('#villeNaissance,#apaVille,#apeVille').autocomplete( ... )

ne fonctionne pas ?

Citation:

Envoyé par SpaceFrog

Code:

$('#villeNaissance,#apaVille,#apeVille').autocomplete( ... )

ne fonctionne pas ?

Eh ben si, ça fonctionne ! Merci. :king:

La semaine dernière, j'avais dû plutôt essayer $("#villeNaissance","#apaVille","#apeVille").autocomplete( ... ) qui ne fonctionnait pas.

Voici le code de la fonction unique, pour ceux qui voudraient faire le même genre de truc :

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
 * JQuery.ui Autocomplete pour les villes
 * @abstract : Gère l'autocomplétion lors de la saisie de la ville en fonction du pays pré-sélectionné
 */
$( function() {
	$("#villeNaissance,#apaVille, #apeVille").autocomplete({
		source: function(request, response)
		{
			var controle_ville = $(this.element).prop("id");
			var controle_pays;
 
			switch (controle_ville)
			{
				case "villeNaissance":
					controle_pays = "paysNaissance";
					break;
				case "apaVille":
					controle_pays = "apaPays";
					break;
				case "apeVille":
					controle_pays = "apePays";
					break;
			}
 
			var idPays = $("#"+controle_pays).val();
			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
	});
});

EDIT : J'en ai profité pour en faire un billet de blog. ;)