javascript - 在动态表上使用 jQuery 自动完成的困难

Question

我完全被难住了，在这个问题上尝试了尽可能多的不同迭代，希望能得到一些帮助。我有一个动态表，其中有一个添加行的按钮，但我无法让自动完成功能在第一行之后工作。关于我做错了什么的任何建议？

这是我的代码:

var roomNames = [
  "Balcony",
  "Kitchen",
  "Bedroom 1"
];

$( "#room-list" ).autocomplete({
  source: roomNames
});

var Rcounter = 1;

$("#addrow").on("click", function () {
    var rowCount = $('#myTable >tbody >tr').length;
    if (rowCount < 24) {

        var $newRow = $("<tr>");
        var cols = "";
        Rcounter++;

        cols += '<td><input type="text" id="room-list" name="room' + Rcounter +'"></td>';

        $newRow.append(cols);
        $newRow.appendTo("table#myTable").autocomplete(roomNames);


    }
}); 

谢谢你的帮助。

Answer 1

您正在向表格行添加自动完成。您需要将其添加到 input 中。您还需要像设置 room-list 一样为自动完成设置 source。现在您只传递数组。

所以像这样的东西应该修复它(你也可以单独创建输入元素而不是使用 find):

$newRow.find("input").autocomplete({ source: roomNames });

另一种解决方案是根据选择器将其设置为表格，而不是将其设置为每个输入。 (这将在点击事件之外)

例如

$("#myTable").on('keydown.autocomplete', "input", function() {
  $(this).autocomplete({
    source: roomNames
  });
});