Jquery 自动完成不在对话框中工作

嗨，我有一个自动完成的输入字段。当从HTML视图调用时，它可以正常工作，但当使用对话框调用时，下拉列表不会出现。如果我使用向上和向下键，数据会显示在下拉列表中，但我看不到下拉列表。如何使其工作？

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

为了使其工作，我必须更改autocomplete的z索引。我在css中添加了以下代码：

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

---

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

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

• 指定

  appendTo

  选项并引用对话框中的元素
• 将

  'ui-front'

  类添加到包含自动完成输入的元素中，该元素位于对话框中

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

也就是说，如果您有：

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

---

参考资料：。

您必须提供更多信息。。。例如：控制台上有任何JS错误吗？在使用“选择器”时要考虑一些问题。当您在

中的某个地方创建对话框HTML时，请记住，只要您在其上调用

.dialog

，它就会被“移动”。也就是说，jQueryUI在其周围构建了一个奇特的包装，并将其附加到身体上。因此，如果自动编译的“选择器”类似于

$（“body#somecontainer.my-auto-c”）

&&your's dialog也在

#somecontainer

中，那么每当您将对话框设置为对话框时，您的原始选择器将不再工作，因为它不再位于该容器中。创建一个对话框。显示您的代码会显示超过1000个单词；）@SpYk3HH可能是正确的。如果禁用jquery ui.css，我可以看到我的自动竞争下拉列表。它出现了，但不知怎的，当我加入css时，对话框的主体出现在前台，下拉菜单出现在后台。我不知道如何解决这个问题。让我知道你的意见。Thanks@user1596433最简单的解决方法是，如果要将自动完成放到对话框中，给该对话框一个ID，然后根据对话框ID为该自动完成进行所有选择。例如：

，那么您的CSS将类似于

\myDialog.ui自动完成输入{

和jQuery选择器将位于相同的上下文中：

$（“#myDialog input[name=myAC]”）

或在设置了ac之后（“#myDialog.ui autocomplete input”）[请记住，jQuery将在初始化autocomplete后添加我在此处显示的类。在这种情况下，在对话框外调用时它不应该工作。此解决方案可行，但它不是最好的方法，而且可能会很麻烦。您更愿意在我的回答中使用此解决方案。我想

appendTo

是下拉列表中应该使用的元素可以被附加到，因此我将我的

appendTo

设置为带有自动完成功能的输入（这对我不起作用）。但是将

appendTo

设置为指向我的对话框（其中包含深层的自动完成输入），就像您在示例中所做的那样。谢谢！

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

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