Autocompletion sur formulaire dynamique

Version imprimable

Bonjour,

J'utilise un formulaire dont on peu rajouter des champs input au fur et à mesure en fonction des besoins.
Le problème c'est que du coup, l'autocompletion ne marche que sur le premier champ input.

Voici le code utilisé :

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
$(document).ready(function()
{
	$("#addalliages").click(function()
	{
		var new_line = $('#alliages').find('tr:last').clone(true);
		new_line.find('input').attr('id', function(){
          var parts = this.id.match(/(\D+)(\d+)$/);
          return parts[1] + ++parts[2];
     });
		new_line.css('display','none');
    $('#alliages').append(new_line);
		new_line.show(500);
		return false;
	});
});
$(document).ready(function(){
	jQuery.each(
		$('input.autocompletereceipts'),function(index,element){
			element=$(element);
			element.autocomplete({
				source:"include/user/autocompletereceipts.php?",
				minLength:2
		});
	});
});

Je suspecte le fait que lors de l'ajout d'une ligne dans mon formulaire, le DOM ne doit pas être relu, mais ce n'est qu'une hypothèse.

Pour information, voici le code php/html sur le quel ça s'accroche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
					<table id="alliages" style="border:none">
						<tr>
							<td style='text-align:right;width:50%;border:none'>
								<select name="name[]">
									<?php
                                                                        for($i=0;$i<=10;$i++)
                                                                        {
                                                                                echo '<option value="'.$receiptslist[$i].'">'.$receiptslist[$i].'</option>';
                                                                        }
                                                                        ?>
								</select>
							</td>
							<td style='text-align:left;width:50%;border:none'>
								<input id="test1" type="text" size="10" maxlength="4" value="" name="qtity[]" style="text-align:right" class="autocompletereceipts" />
							</td>
						</tr>
					</table>
					<div style="margin:5px">
						<input type="image" src="./img/check_mark.png" title="Calculer" onclick="this.form.submit();" style="background:transparent;border:none;margin:0 30px;" />
						<input type="hidden" name="sent" value="sent" />
						<input type="image" src="./img/round_add.png" title="Ajouter un alliage" id="addalliages" style="background:transparent;border:none;margin:0 30px;" />
					</div>
				</div>

Pourriez-vous m'aider à la résolution de ce problème qui m'occupe depuis plusieurs jours déjà ?
Merci par avance de votre attention.

16/07/2012, 08h10
Bovino

Déjà traité un grand nombre de fois...
Tu ne peux pas affecter directement des événements à des éléments qui n'existent pas dans le DOM !

Tu dois soit appeler le script d'autocomplétion une fois chaque élément ajouté, soit utiliser la délégation d'événement à l'aide de .on().

Bon en fait un ami m'a aidé et en faisant ceci :

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
function setAutoComplete(elements) {
  elements.each (function(index, element) {
    jQuery(element).autocomplete({
				source:"include/user/autocompletereceipts.php?",
				minLength:1,
				delay: 500
		});
  });
};
 
jQuery(function(){
	setAutoComplete(jQuery('input.autocompletereceipts'));
 
	$("#addreceipts").click(function(e)
	{
		e.preventDefault();
 
		var new_line = jQuery('table#receipts tr:last').clone();
		new_line.find('input.autocompletereceipts').attr('value', '');
 
		$('#receipts').append(new_line);
		setAutoComplete(new_line.find('input.autocompletereceipts'));
 
		new_line.show(500, function(){
		  new_line.find('input.autocompletereceipts').focus();
		});
	});
 
	jQuery('input.receipts_qt').live('keydown', function(e) {
	  if(e.which == 107) {
	    $("#addreceipts").click();
	    e.preventDefault();
	  };	
	});
	jQuery('input.receipts_qt').attr('autocomplete', 'off');
});

ça marche très bien (les id et classes ont changé de nom).
Du coup, pas besoin de la fonction .on()

Merci de votre réponse.