Autocomplétion de champs[ ] créés dynamiquement

Version imprimable

Bonjour,
Voilà plusieurs jours (pour ne pas dire plus longtemps) que je tente de créer ceci:

- Un champs où l'utilisateur rentre une occupation. Ce champs est autocomplété via Jquery.
- L'utilisateur peut rentrer plusieurs occupations, il peut donc cliquer sur "+" et un nouveau champs apparait.

Malheureusement, je ne parviens pas à faire de l'autocomplétion sur ces nouveaux champs car Jquery ne doit pas intégrer les nouveaux champs occupations[].

Ma fonction Jquery est la suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $('input[name="occupation[]"]').on("keyup", function(){ var occup = $(this).val(); var currentElement = $(this); if(occup != ""){ $.ajax({ type: "GET", url: "page_geneoccup.php", data: {"occup":occup}, dataType: 'json', success:function(responseData){ var liste_occup=responseData; $(currentElement).autocomplete({ source: liste_occup }); return; }, error:function(XMLHttpRequest, textStatus, errorThrow){ console.log("Error: " + XMLHttpRequest.status + errorThrow ); return; } }); } });
Cela fonctionne sur des champs préexistants, mais ayant essayé des créations de champs via JVS (de beaucoup de manière différentes...), l'autocomplétion ne fonctionnait pas sur ces nouveaux champs.

> Est ce que créer les nouveaux champs via Jquery permettrait de faire fonctionner l'autocomplétion sur les nouveaux champs ?

> Sinon quelle serait la solution à ce problème ?

Merci d'avance pour vos lumières

23/09/2015, 12h00
Sebastien14

Bonjour,

Voir ton code html serait pas mal.
Il faut que tu modifies la liste te permettant de faire de l'autocomplétion aussi lorsque l'utilisateur ajoute un champ, enfin je suis pas sur d'avoir compris ce que tu souhaites faire, c'est pour sa que je veux voir ton code.
23/09/2015, 12h29
lmplmp

Mon code html est surtout en PHP (et assez long), la ligne nous intéressant est des plus simples:

Code:

<input style="display: inline;" type="text" name="occupation[]">

ce que je voudrais faire:

- Je voudrais cloner cette ligne lorsqu'un utilisateur appuie par exemple sur un bouton "+", mais surtout que cette nouvelle ligne soit apte à l'autocomplétion via Jquery. Car je parviens à créer de nouveaux champs en Javascript mais je ne parviens pas à faire de l'autocomplétion sur ces nouveaux champs.

J'ai lu à diverses reprises que créer les nouvelles champs via Jquery pourrait me faciliter la tâche mais je ne vois pas comment faire.

Modifier la liste de quoi exactement ?

Merci beaucoup pour ton aide.
23/09/2015, 12h35
Sebastien14

La fonction qui te permet de faire de l'autocomplétion en jquery se lance pour les input ayant comme name occupation, quand tu ajoutes un input, il ne peut pas avoir le même name, du coup la fonction jquery ne se lance pas. Je te conseille d'attribuer une classe à ton input et de modifier le déclenchement de ta fonction jquery en mettant le nom de ta classe.
Les nouveaux input devront avoir la même classe.
23/09/2015, 12h58
SpaceFrog

il suffit juste de relancer un coup d'initialisation d'autocomplete sur el callback de ton ajax .
Les élément n'existant pas au chargement de la page l'inti de autocomplete ne les a pas affectés ...

Je vois, mais Jquery pourtant arrive à faire de l'autocomplétion avec ce code si plusieurs champs ont le même noms mais qu'ils ne sont pas créés dynamiquement. C'est plus un tableau de champs. En soi ils n'ont pas vraiment le même nom.

J'ai reçu une réponse différente qui conserve le tableau de input mais que je ne parviens pas à appliquer
Citation:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var initAutoCompleter = function(){ allInputs = $('input[name="occupation[]"]'); $(allInputs).each(function(i,oInput){ $(oInput).off(); $(oInput).on('keyup',function(){ var occup = $(oInput).val(); if(occup){ //do your stuff ;) } }); }); };
It's important to run that function after you add the new Input Element. You could also write a function that allows you to add the eventListeners to only the element you've just added.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var addAutoCompleter = function(newElement){ newInputs = $(newElement); $(newInputs).each(function(i,oInput){ $(oInput).off(); $(oInput).on('keyup',function(){ var occup = $(oInput).val(); if(occup){ //do your stuff ;) } }); }); };
which you can initiate by adding:
Code:

1 2 3 $(function(){ addAutoCompleter($('input[name="occupation"]')); });
Cette réponse (brute) me paraît toucher à ce que je veux faire mais ca reste un peu brut de décoffrage pour moi donc je ne sais pas comment mettre cela en place...

23/09/2015, 13h16
lmplmp

Citation:

Envoyé par SpaceFrog

il suffit juste de relancer un coup d'initialisation d'autocomplete sur le callback de ton ajax .
Les éléments n'existant pas au chargement de la page l'inti de autocomplete ne les a pas affectés ...

Merci beaucoup, c'est exactement ce que je veux faire :hola: . Sauf que j'ignore comment... Pourriez-vous m'en dire un peu plus sur l'application ?
23/09/2015, 13h19
Sebastien14

J'ai déjà rencontré ce genre de souci que j'ai simplement résolu en utilisant la fonction live() de jquery
23/09/2015, 13h21
lmplmp

Il parait qu'elle est périmée, est ce vrai ?
23/09/2015, 13h25
Sebastien14

Et bien il suffit de vérifier.... et effectivement elle l'est depuis la version 1.7 et a été supprimée en version 1.9.... c'est bon à savoir.
Je vais avoir quelques modifications à apporter à certaines de mes applications.
23/09/2015, 13h30
Sebastien14

A la place de live, il faut utiliser la fonction on().
Mais sinon test le code que l'on t'a fournit La ou c'est écrit do your stuff, tu places ton appel ajax
23/09/2015, 14h03
SpaceFrog

sauf que le on c'est pour des evenement, pas des plugins ...
il semble que ton autocomplet s'initialise avec initAutoCompleter ?

relance la fonction à la fin de ton success ?

Voici mon nouveau code qui fonctionne:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html lang="fr">
<head>
<meta charset="utf-8" />		 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
 
 
	var oAutoCompleteElements = {
    addInputEvents:function(newInputs){
        var r_newInputs = $(newInputs);
        $(newInputs).each(function(i, oInput){
            $(oInput).off();
            $(oInput).on('keyup',function(){
                var occup = $(oInput).val();
                if(occup){
                $.ajax({
				type: "GET",
				url: "page_geneoccup.php",
				data: {"occup":occup},
				dataType: 'json',
				success:function(responseData){
					var liste_occup=responseData; 
					$(oInput).autocomplete({
						source: liste_occup
					});	
					return;
				},
				error:function(XMLHttpRequest, textStatus, errorThrow){
					console.log("Error: " + XMLHttpRequest.status + errorThrow );
					return;
				}
			});
                }
            });
        });
    },
    addButtonEvents:function(){
        $('#addNewInput').on('click',function(){
            oAutoCompleteElements.addNewInput();
        });
    },
    addNewInput:function(){
        newInput ='<input type="text" name="occupation[]"/>';
        $('#occupationsContainer').append(newInput);
          oAutoCompleteElements.addInputEvents($('input[name="occupation[]"]:last'));
    },
    init:function(){
       this.addButtonEvents();
       this.addInputEvents($('input[name="occupation[]"]'));
    }
};
 
$(function(){
    oAutoCompleteElements.init();
});
 
 
 
	</script>
 
	</head>
	<body>
 
 
 
<div  id="occupationsContainer">
<input name="occupation[]">
<input type="button"  id="addNewInput" value="add">
</div>
 
	</body>
	</html>

Merci à tous pour votre aide.