Javascript 追加行添加自动完成jQuery

我已经在一个表格上做了一个自动完成，可以添加新行

但是，我的自动完成只锁定到第一项

你能帮我让自动完成在附加行上工作吗

jsFiddle：

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

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

HTML:

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

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

项目编号
价格欧元
添加行
更新

它不起作用，因为您正在动态添加文本框，对于动态html，自动完成以不同的方式实例化，如：

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

//以前的代码
$（'#mytable tbody>tr:last'）.clone（true）.insertAfter（'#mytable tbody>tr:last'）；
$（'#mytable tbody>tr:last input'）.attr（'name'，changeIds）.attr（'id'，changeIds）；
//更改代码行
var$newRow=$（''+$（'#mytable tbody>tr:first'）.html（）；
$newRow.find（'input'）.attr（'name'，changeIds.attr（'id'，changeIds））；
$（'#mytable tbody'）。追加（$newRow）；

由于克隆，代码无法工作（true）。 不过，我建议为行使用“模板”函数

---

至于前面的评论，我不建议将其置于（'keypress'）上，…，因为每次你按下一个键时，它都会被触发（但是你只能用

one

听一次，但这不会解决你的问题，因为它不会在“第二次”被触发）.

以下是您的

代码之后更新的JSFIDLE:


我动态初始化了Autocomplete并为新行创建了一个模板，因为clone函数克隆了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;
    });
});

$（文档）.ready（函数（）{
$（document）.on（'keydown.autocomplete'，'#mytable tbody>tr:last input'，function（）{
$（此）。自动完成({
资料来源：availableAttributes
});
});
$（“#添加”）。单击（函数（）{
var newIndex=globalNewIndex+1；
变量changeIds=函数（i，val）{
return val.replace（globalNewIndex，newIndex）；
}
变量$newRow=$（''）；
$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（）；}）；
返回false；
});
});