javascript - 追加行添加自动完成 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

这是按照您的代码更新的jsfiddle:

<强> Updated fiddle

我动态初始化了 Autocomplete 并为新行创建了一个模板，因为克隆函数克隆了 autcomplete 的实例，这不好。

这是您的新 JavaScript:

$(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;
    });
});