jquery - 自动完成在对话框中不起作用

Question

嗨，我在输入字段上有一个自动完成功能。从 HTML 视图调用时它工作正常，但使用对话框调用时，下拉列表不会出现。如果我使用向上和向下键，数据会出现在下拉列表中，但我看不到下拉列表。我怎样才能让它工作？

Answer 1

我必须更改自动完成的 z-index 才能使其工作。我在我的 css 中添加了以下代码：

.ui-autocomplete
    {
        position:absolute;
        cursor:default;
        z-index:4000 !important
    }

Answer 2

默认情况下，下拉列表是附加到主体的 div 元素。由于正文的 z-index 低于模态对话框，因此下拉菜单不可见。

要解决此问题，您必须将其附加到对话框内的元素。你可以通过两种方式做到这一点：

• 指定appendTo选项并引用对话框中的元素
• 将'ui-front'类添加到包含您的自动完成输入的元素中，并且它位于对话框内

这样，下拉 div 元素将具有与对话框相同的 z-index，并且它会毫无问题地显示出来。

即，如果你有这个：

<div id='myDialog'>
  <input id='myAutocompleteInput'>

您必须像这样添加类：

<div id='myDialog' class='ui-front'>
  <input id='myAutocompleteInput'>

或在自动完成中指定附加到选项

$('#myAutocompleteInput').autocomplete({
  appendTo: '#myDialog'
  // ...
})

参考：jquery UI 对话框 appendTo 选项。

Answer 3

可能您有多个具有相同 ID o 类的选择器。