自动完成功能无法在Dialog中使用

Question

您好我在输入字段上有自动完成功能。从HTML视图调用它时工作正常，但使用Dialog调用时，下拉列表不会出现。如果我用完了，那么数据会显示在下拉菜单中。向下键，但我没有看到下拉列表。我怎样才能使它发挥作用？

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 dialog appendTo option。

Answer 3

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