append line add autocomplete jQuery

Question

新しい行を追加することができるフォームでオートコンプリートを作成しました。

しかし、私のオートコンプリートは最初のアイテムだけをロックします。

自動補完機能が追加された行に対して機能するように助けてくれますか？

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

はあなたcode次の更新jsfiddleです：

Updated fiddle

クローン機能が良いされていない、autcompleteのインスタンスをクローン化されたので、私は動的にオートコンプリートを初期化し、新しい行のためのテンプレートを作成しました。

はここにあなたの新しいジャバスクリプトです：

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

は、動的かつダイナミックHTMLのためのテキストボックスを追加しますオートコンプリートは次のように異なる方法でインスタンス化されます：

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); 

コードが理由クローン（真）で動作しませんでした。 私は行のための 'テンプレート'機能を提案します。

.on('keypress', ...これはキーを押すたびに実行されるため、これは入れません（oneで「一度だけ」聞くことができますが、これで問題は解決しません。 「2回目」の時に解雇されることはありません）。ここで