自动完成动态创建的输入

Question

Sorry for asking something that has been already asked by people (for instance here :

jQuery autocomplete for dynamically created inputs)

but i cannot make work it despite the help i found on internet. So, i need to use Jquery autocomplete with dynamically created inputs. My code looks as follows:

$("#add_ligne2").live("click", function() { ...
         if (nb_ligne < 10) {
            var html = "";
            var next_ligne = last_ligne;
            html = '<tr rel="' + next_ligne + '">';
            html += '<td><input type="text" id="autoCompleteProjets' + next_ligne + '"/></td>';
            html += '</tr>';
            $("#content_tr").append(html);
            $('#autoCompleteProjets1', html).autocomplete(autocomp_opt);
         }
      }
      var autocomp_opt = {
         source: "/index/autocomplete",
         minLength: 2,
         select: function(event, ui) {
            /* console.log( ui.item ?
                 "Selected: " + ui.item.value + " aka " + ui.item.id :
                 "Nothing selected, input was " + this.value 
             );*/
            $('.hidden').val(ui.item.id);
         }
      }

Answer 1

You use fixed id "autoCompleteProjets1", I believe you want "autoCompleteProjets" + next_ligne

$('#autoCompleteProjets' + next_ligne, html).autocomplete(autocomp_opt);

You might already have it, but I'll mention it anyway - make sure you initialize last_ligne outside of the anonymous function, else you create local variable, which is unset once out of scope:

var last_ligne = 0;

Then, you don't increment the last_ligne variable, use this:

var next_ligne = ++last_ligne;

And most important: use firebug in firefox, or equivalent for other browsers, to find out what you really generate.