Discussion :

[lmplmp]

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 :

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
	$('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

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

[lmplmp]

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

Code :

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

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

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

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

[lmplmp]

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

Code :

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

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 :

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

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 :

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

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

[lmplmp]

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 . Sauf que j'ignore comment... Pourriez-vous m'en dire un peu plus sur l'application ?

[Sebastien14]

J'ai déjà rencontré ce genre de souci que j'ai simplement résolu en utilisant la fonction live() de jquery

[lmplmp]

Il parait qu'elle est périmée, est ce vrai ?

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

[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

[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 ?

[lmplmp]

Voici mon nouveau code qui fonctionne:

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