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:0x00007fcf1ae07770>

(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.


(François Genestin) #6

Bonjour,

Le “focusin” n’est pas idéal ça reste un contournement, il faudra le remplacer par un vrai “change” lorsque vous serez à jour en version P22b.


(Guillaume Thelohan CRB) #7

Bonjour François,

Notre environnement de dev est en version 4.0 patch level P22b (database patch level P21)Built on2018-11-09 17:45 (revision daae27e4a132253e2735c71cac37187f0700d650) .

Or, le problème est toujours présent sur le “change” (il faut sélectionner puis faire un second clic avant que les données ne se remplissent dans les inputs). Le “focusin” remplit notre besoin.

Merci de votre retour,
Guillaume


(François Genestin) #8

oui c’est ce que je dis, ce sera à faire quand vous aurez une version plus récente que la beta de novembre.