JQuery自动完成在对话框中不起作用答案

【问题标题】：JQuery autcomplete not working in dialog boxJQuery自动完成在对话框中不起作用
【发布时间】：2020-08-05 04:12:35
【问题描述】：

我正在尝试为对话框中的文本框应用 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">

请帮助我在这里缺少什么。

提前致谢。

【问题讨论】：

标签： javascript jquery jquery-ui-dialog jquery-ui-autocomplete

【解决方案1】：

问题是因为在实例化自动完成时对话框不可见，因此插件不知道在屏幕上的哪个位置放置选项下拉列表。

要解决此问题，仅在对话框在屏幕上可见之后实例化自动完成控件。当您使用 jQueryUI 时，您需要将事件处理程序挂钩到对话框的 open 事件并在其中调用 $("#status").autocomplete()。

【讨论】：