时间戳

首页 > 解决方案 > JQuery autcomplete在对话框中不起作用

javascript - JQuery autcomplete在对话框中不起作用

问题描述

我正在尝试将 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">

请帮助我在这里缺少的东西。

提前致谢。

标签： javascriptjqueryjquery-ui-dialogjquery-ui-autocomplete

解决方案

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

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

推荐阅读