Remplissage d'un champ avec le résultat d'une autocomplétion

4.0
Remplissage d'un champ avec le résultat d'une autocomplétion
0
Tags: #<Tag:0x00007f293dc4b108>

(Guillaume Thelohan CRB) #1

Bonjour,

En v4.0 patch level P22b (database patch level P21) :

Nous interrogeons un webservice en fonction d’une saisie utilisateur. Lorsque celui-ci sélectionne un élément dans le “dropdown”, nous voudrions qu’un autre champ soit rempli à partir de l’élément sélectionné.

Dans l’exemple suivant, renseigner “SAINT-MALO” dans le champ “Commune”.

image

Actuellement nous utilisons une ressource qui gère les évènements au niveau du champ Commune :

            p.form.onload = function(ctn, obj) {
                // Quand le code postal change => affectation de la commune
                var cp = ui.getUIField(ctn, obj, "fopSessionCp");
                var commune= ui.getUIField(ctn, obj, "fopSessionCommune");
                var codeInsee= ui.getUIField(ctn, obj, "fopSessionCodeInsee");
                
                cp.ui.on("change mousemove keyup input select click", function() {
                	var valCp=cp.ui.val();
                	if(valCp.indexOf('(')>0){
                    	cp.ui.val(valCp.substring(0,5));
                    	commune.ui.val(valCp.substring(6,valCp.indexOf('(')-1));
                    	codeInsee.ui.val(valCp.substring(valCp.indexOf('(')+1,valCp.length-1));
                	}
                });
               commune.ui.on("change mousemove keyup input select click", function() {
                	var valCommune=commune.ui.val();
                	if(valCommune.indexOf('(')>0){
                    	cp.ui.val(valCommune.substring(0,5));
                    	commune.ui.val(valCommune.substring(6,valCommune.indexOf('(')-1));
                    	codeInsee.ui.val(valCommune.substring(valCommune.indexOf('(')+1,valCommune.length-1));
                	}
                });
                 
            };

Ceci est imprécis car il faut un évènement sur le champ commune, et non sur le dropdown pour que l’évènement soit déclenché, ce qui perturbe nos utilisateurs.

Est-il possible de placer un évènement ("click ou “select”) directement sur un élément du dropdown ?

Merci d’avance,

Guillaume


(François Genestin) #2

Bonjour,

  • le choix du dropdown force un evenement “change” sur le champ, donc seul cet événement sur votre code postal est suffisant.
  • la méthode val("xxx") ne provoque pas de change, vous pouvez le forcer en faisant un val("xxx").change() pour déclencher d’autres triggers
cp.ui.on("change", function() {
  var valCp = cp.ui.val(), 
      i = valCp.indexOf('(');
  if (i>0) {
    cp.ui.val(valCp.substring(0,5));
    commune.ui.val(valCp.substring(6, i-1)).change(); // change pour éventuellement appeler d'autres contraintes liées à la commune
    codeInsee.ui.val(valCp.substring(i+1, valCp.length-1)).change();
  }
});

(Guillaume Thelohan CRB) #3

Bonjour,

Merci de votre réponse. J’ai appelé l’évènement change() “secondaire”, mais j’ai toujours mon problème :


                cp.ui.on("change", function() {
                	console.log("change sur cp");
					var valCp = cp.ui.val(), 
    				i = valCp.indexOf('(');
					if (i>0) {
    					cp.ui.val(valCp.substring(0,5));
    					commune.ui.val(valCp.substring(6, i-1)).change(); // change pour éventuellement appeler d'autres contraintes liées à la commune
    					codeInsee.ui.val(valCp.substring(i+1, valCp.length-1)).change();
					}
				});

Lors d’une autocomplétion, je saisis mes caractère, je clique sur mon élément du dropbox : les texte de l’input est bien remplacé. Par contre je dois rééffectuer un deuxième clic en dehors de mon input pour passer dans mon change “principal” et afficher ma trace de debug. Le console.log() n’est pas appelé dès le clic sur mon élément du dropbox.


(François Genestin) #4

Pouvez vous indiquer comment vous appelez votre service externe ? sur keyup de l’input ? et le code correspondant pour afficher le dropdown ?

il doit y avoir un pb d’appel au trigger “change” dans votre cas.

Normalement Simplicité remet également le focus sur l’input pour fermer le popup. Essayez avec focusin au lieu de change :
cp.ui.on(“focusin”, function() …


(Guillaume Thelohan CRB) #5

Bonjour François,
Nous utilisons la méthode fieldCompletion()

CrbFopStagiaire.fieldCompletion = function(field,query,context) {
	var r="",p="",nbLigne=15,i=0, ligne="", m="", url="", pwd="",login="", article="",commune="",codePostal="";
	var list=new ArrayList();
	// Recherche des communes : getCommunes,chargeCommunes et chargeCp se trouvent dans les code partagé CRB_WS_LOCALISATION
	if (field=="fopStagiaireAdrCommune"){
		r = getCommunes("",query);
		list=chargeCommunes(r,nbLigne);
	}
	if (field=="fopStagiaireAdrCp"&&query>10000){
		r = getCommunes(query,"");
		list=chargeCommunes(r,nbLigne);
	}
	return list;
};

En se basant sur le “focusin”, cela fonctionne.

Merci,

Guillaume.