Zeile anfügen Autocomplete hinzufügen jQuery

Question

Ich habe eine Autovervollständigung auf einem Formular vorgenommen, wo es möglich ist, eine neue Zeile hinzuzufügen.

Meine automatische Vervollständigung sperrt jedoch nur das erste Element.

Können Sie mir helfen, die automatische Vervollständigung für die Arbeit an angehängten Zeilen zu bekommen.

jsFiddle: https://jsfiddle.net/r65x9aj0/3/

Javascript:

var globalNewIndex = 0; 
var availableAttributes = [ 
    "account_address", 
    "account_address_city", 
    "account_address_country", 
    "account_address_state", 
    "account_address_street1", 
    "account_address_street2", 
    "account_address_zip", 
    "account_email", 
    "account_login", 
    "account_name", 
    "account_number", 
    "account_telephone" 
]; 



$(document).ready(function() { 
    $('#fixed_name_'+globalNewIndex).autocomplete({ 
      source: availableAttributes 
     }); 
    $("#add").click(function() { 
     var newIndex = globalNewIndex+1; 
     var changeIds = function(i, val) { 
      return val.replace(globalNewIndex,newIndex); 
     } 

     $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); 
     $('#mytable tbody>tr:last input').attr('name', changeIds).attr('id', changeIds); 

      globalNewIndex++; 
     $('#fixed_name_'+globalNewIndex).autocomplete({ 
      source: availableAttributes 
     });  
     $('#mytable tbody>tr:last .emptythis').val(''); 
     $("#mytable tbody>tr:last").each(function() {this.reset();}); 

     return false; 
    }); 
}); 

HTML:

<table id="mytable" class="table table-hover"> 
    <thead> 
     <tr style="font-weight: bold"> 
      <td>Item number 
      </td> 
      <td>Price EUR 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="person"> 
      <td> 
       <input type="text" name="fixed_name[0]" id="fixed_name_0" class="form-control emptythis" autocomplete="off" /> 
      </td> 
      <td> 
       <input type="number" name="fixed_price[0]" id="fixed_price_0" class="form-control emptythis" autocomplete="off" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<div class="row"> 
    <div class="col-md-3"> 
     <button type="button" class="btn btn-success btn-block btn-lg" id="add">Add line 
     </button> 
    </div> 
    <div class="col-md-9"> 
     <button type="submit" class="btn btn-primary btn-block btn-lg" id="searchinternal">Update 
     </button> 
    </div> 
</div> 
</form> 

Answer 1

ist eine aktualisierte jsfiddle nach Ihrer code:

Updated fiddle

I automatische Vervollständigung dynamisch initialisiert und erstellt eine Vorlage für die neue Zeile, da die Klon-Funktion die Instanz von autcomplete geklont, was nicht gut ist, .

hier Ihr neues Javascript ist:

$(document).ready(function() { 
    $(document).on('keydown.autocomplete', '#mytable tbody>tr:last input', function() { 
     $(this).autocomplete({ 
      source: availableAttributes 
     }); 
    }); 
    $("#add").click(function() { 
     var newIndex = globalNewIndex+1; 
     var changeIds = function(i, val) { 
      return val.replace(globalNewIndex,newIndex); 
     } 
     var $newRow = $('<tr class="person"><td><input type="text" class="form-control emptythis ui-autocomplete-input" autocomplete="off"></td><td><input type="number" name="fixed_price[1]" id="fixed_price_1" class="form-control emptythis" autocomplete="off"></td></tr>'); 
     $newRow.insertAfter('#mytable tbody>tr:last'); 
     $('#mytable tbody>tr:last input').attr('name', changeIds).attr('id', changeIds); 
      globalNewIndex++; 
     $('#mytable tbody>tr:last .emptythis').val(''); 
     $("#mytable tbody>tr:last").each(function() {this.reset();}); 

     return false; 
    }); 
}); 

Answer 2

Es funktioniert nicht, weil Sie die Textbox dynamisch hinzufügen und für die dynamische html der Autocomplete wird auf verschiedene Weise instanziiert wie:

var selector = '.searchInput'; 
$(document).on('keydown.autocomplete', selector, function() { 
    $(this).autocomplete(options); 
}); 

Answer 3

// previous code 
    $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); 
    $('#mytable tbody>tr:last input').attr('name', changeIds).attr('id', changeIds); 


    // changed lines of code 
    var $newRow = $('<tr>' + $('#mytable tbody>tr:first').html() + '</tr>'); 
    $newRow.find('input').attr('name', changeIds).attr('id', changeIds); 
    $('#mytable tbody').append($newRow); 

Der Code wegen des Klons funktionierte nicht (true). Ich würde vorschlagen, eine "Vorlage" -Funktion für die Reihe obwohl. Wie beim vorherigen Kommentar würde ich nicht vorschlagen, es .on('keypress', ... zu setzen, weil dies jedes Mal ausgelöst wird, wenn Sie eine Taste drücken (Sie können jedoch nur 'einmal' mit one hören, aber das wird Ihr Problem nicht lösen, da es wird dann nicht zur "zweiten" Zeit gefeuert. Hier