JQuery автозаполнение не работает в диалоговом окне

Question

Я пытаюсь применить jQuery Автозаполнение для текстового поля в диалоговом окне. Ниже приведен код.

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++"
];

$("#status").autocomplete({
    source: availableTags,
    appendTo: "#dialogId"
});

<input type="text" aria-labelledby="status" class="form-control form-control-sm col-8" id="status" />

При таком подходе автозаполнение не работает. Теги автозаполнения CSS и autocomplete="off"/"on" не применяются к текстовому полю.

Если я пытаюсь применить его на родительской странице, он работает так, как ожидалось, как показано ниже.

<input type="text" class="form-control form-control-sm col-8 ui-autocomplete-input" id="auto" autocomplete="off">

Пожалуйста, помогите с тем, что мне здесь не хватает.

Заранее спасибо.

Answer 1

Проблема в том, что диалоговое окно не отображается при создании экземпляра автозаполнения, поэтому плагин не знает, где на экране расположить раскрывающийся список параметров.

Чтобы исправить это, создайте только элемент управления автозаполнением после диалог виден на экране. Поскольку вы используете jQueryUI, вам нужно подключить обработчик событий к событию open диалога и вызвать там $("#status").autocomplete().