Сложность с автозаполнением 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

Вы добавляете autocomplete к строке таблицы.Вам нужно добавить его к input.Также вам нужно установить source для автозаполнения, как для room-list.Прямо сейчас вы передаете только массив.

Так что-то вроде этого должно исправить это (вы также можете создать элемент ввода отдельно вместо использования find):

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

Другим решением было бы установить его в таблицу на основе селектора вместо того, чтобы устанавливать его для каждого входа.(Это будет за пределами события щелчка)

например

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