JQuery autcomplete 在對話框中不起作用

Question

我正在嘗試將 jQuery AutoComplete 應用於對話框中的文本框。 下面是代碼。

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

問題是因為在實例化自動完成時對話框不可見，因此插件不知道 position 選項下拉菜單在屏幕上的位置。

要解決此問題，請僅在屏幕上顯示對話框后實例化自動完成控件。 當您使用 jQueryUI 時，您需要將事件處理程序掛鈎到對話框的open事件並在那里調用$("#status").autocomplete() 。