Discussion :

[fiddev]

Bonjour

Comment je peux faire pour récupérer l'id d'un input qui est créer dynamiquement

pour ensuite lancer la fonction autocomplete

quand je fait l

$( "#intermediaire0").autocomplete(

rien ne se passe

merci

[SpaceFrog]

Sans voir un seul petit bout de code ...

ton attribution d'autocomplete est fait à quel moment ?

[fiddev]

Bonjour

voici le code qui créer le input

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
var zoneAjoutPieceCompte;
var nbPieceCompte=0;
function ajouterPieceCompte()
{
    if(nbPieceCompte==0){ //si il s'agit du premier ajout
        zoneAjoutPieceCompte = document.getElementById('intermediaire') //on séléctionne l'emplacement où on veux effectuer les ajouts de champs
        document.getElementById('supCompte').style.display='inline' //on rend disponible le bouton supprimer
 }
 
	 var maDiv = document.createElement("div");
	 maDiv.className="f-row";
	 maDiv.id = "inter"+nbPieceCompte;
	 zoneAjoutPieceCompte.appendChild(maDiv);
 
	 var half = document.createElement("div");
	 half.className="one-half";
	 maDiv.appendChild(half);
 
	  var half2 = document.createElement("div");
	 half2.className="one-half";
	 maDiv.appendChild(half2);
 
	  var maDivH = document.createElement("div");
	 maDivH.className="f-row";
	 half2.appendChild(maDivH);
 
	  var halfH = document.createElement("div");
	 halfH.className="one-half";
	 halfH.style.paddingRight = "10px";
	 maDivH.appendChild(halfH);
 
 
	   var halfM = document.createElement("div");
	 halfM.className="one-half";
	 maDivH.appendChild(halfM);
 
 
	var newlabel = document.createElement("Label");
	newlabel.setAttribute("for","intermediaire["+nbPieceCompte+"]");
	newlabel.innerHTML = "Ville Intermédiaire :";
	 half.appendChild(newlabel); 
 
    //on ajoute un nouveau champ
    var input = document.createElement("input");
    input.type = "text";
    input.name = "intermediaire["+nbPieceCompte+"]";
    input.id  = "intermediaire"+nbPieceCompte;
    input.style.display = "block";
	input.setAttribute("onkeyup", "remplirint("+nbPieceCompte+")");
    half.appendChild(input);
 
 
 
	var newlabelh = document.createElement("Label");
	newlabelh.setAttribute("for","intermediaireh["+nbPieceCompte+"]");
	newlabelh.innerHTML = "Horaire :";
	 halfH.appendChild(newlabelh); 
 
	var newlabelm = document.createElement("Label");
	newlabelm.setAttribute("for","intermediaireh["+nbPieceCompte+"]");
	newlabelm.innerHTML = " ";
	 halfM.appendChild(newlabelm); 
 
 
 
	 var heur = new Array("00","01","02","03","04","05","06","07",
                                                "08","09","10","11","12","13","14","15","16","17",
                                                "18","19","20","21","22","23");
 
var nouv_select = document.createElement('select');
   nouv_select.name = "intermediaireh["+nbPieceCompte+"]";
   nouv_select.id = "intermediaireh["+nbPieceCompte+"]";
for (i =0; i <24; i++)
{
    nouv_select.options[i] = new Option(heur[i], 'value',true);
}
 
nouv_select.options[0].selected="selected"; // choisir celui sélectionné
halfH.appendChild(nouv_select);
 
 
 
	 var min = new Array("00","01","02","03","04","05","06","07",
                                                "08","09","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");
 
var nouv_selectm = document.createElement('select');
   nouv_selectm.name = "intermediairem["+nbPieceCompte+"]";
   nouv_selectm.id = "intermediairem["+nbPieceCompte+"]";
for (i =0; i <24; i++)
{
    nouv_selectm.options[i] = new Option(min[i], 'value',true);
}
 
nouv_selectm.options[0].selected="selected"; // choisir celui sélectionné
halfM.appendChild(nouv_selectm);	 
 
 
 
 
 
 
	nbPieceCompte++;
 
}

et le script autosugesst j'ai mit 0 juste pour les tests

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script type="text/javascript">
 
 
 
			var cache = {};
		$(function ()
		{
			$(document).ready(function() 
			{
				$("#intermediaire0").autocomplete(
				{
 
 
					source: function (request, response)
					{
 
						//Si la réponse est dans le cache
						if (('FR' + '-' + request.term) in cache)
						{
							response($.map(cache['FR' + '-' + request.term], function (item)
							{
 
								return {
									label: item.Ville + ", " + item.CodePostal,
									value: function ()
									{
										if ($(this).attr('id') == 'depart')
										{
											$('#depart').val(item.Ville);
											$('#departvr').val(item.Ville);
											return item.Ville;
										}
										else
										{
											if ($(this).attr('id') == 'arrivee')
											{
												$('#arrivee').val(item.Ville);
												$('#departvrd').val(item.Ville);
												return item.Ville;
											}
 
											if ($(this).attr('id') == 'intermediaire0')
											{
												$('#intermediaire0').val(item.Ville);
												$('#intermediaire20').val(item.Ville);
												return item.Ville;
											}
										}
 
 
									}
								}
							}));
						}
						//Sinon -> Requete Ajax
						else
						{
							var objData = {};
 
							objData = { ville: request.term, pays: 'FR', maxRows: 10 };
 
 
 
							$.ajax({
								url: "./AutoCompletion.php",
								dataType: "json",
								data: objData,
								type: 'POST',
								success: function (data)
								{
									//Ajout de reponse dans le cache
									cache[('FR' + '-' + request.term)] = data;
									response($.map(data, function (item)
									{
 
										return {
											label: item.Ville + ", " + item.CodePostal,
											value: function ()
											{
												if ($(this).attr('id') == 'depart')
												{
													$('#depart').val(item.Ville);
													$('#departvr').val(item.Ville);
													return item.Ville;
												}
												else
												{
													if ($(this).attr('id') == 'arrivee')
													{
														$('#arrivee').val(item.Ville);
														$('#departvrd').val(item.Ville);
														return item.Ville;
													}
 
													if ($(this).attr('id') == 'intermediaire0')
													{
														$('#intermediaire0').val(item.Ville);
														$('#intermediaire20').val(item.Ville);
														return item.Ville;
													}
												}
 
 
 
											}
										}
									}));
								}
							});
						}
					},
					minLength: 3,
					delay: 600
				});
			});
 
			 });
 
 
		</script>

donc je voudrais que du input que je génère en ecriant dedans je lance mon autosuggest

merci

[SpaceFrog]

Deux remarques ...

Pourquoi rajouter l'élement avec du js classque si tu utilises jquery ??

l'autocomplete est attribué sur le ready ... et donc ton élément n'est pas encore dans le page !

initialise l'autocomplete sur l'element après l'avoir ajouté (append)

[fiddev]

merci je vais refaire en ajoutant l’élément avec jquery