jquery自动完成下拉菜单是透明的答案

【问题标题】：jquery autocomplete dropdown is transparentjquery自动完成下拉菜单是透明的
【发布时间】：2015-09-11 07:16:06
【问题描述】：

我正在尝试在我的一个文本字段上使用 jquery 自动完成功能，除了下拉列表出于某种原因是透明的这一事实之外，一切似乎都很好。

我正在链接 jquery-ui.js 和 jquery-ui.css，它们都是 1.11.4 版本。似乎可以加载值，下拉列表的透明度似乎是唯一的问题。我的 js 代码尽可能简单：

$( "#edit_account" ).autocomplete({
source: dataArray
});

这是它的截图：

我环顾四周，没有发现同样的问题。

谢谢。

【问题讨论】：

但它在这里工作得很好。 JSFiddle
请提供重现问题所需的所有代码（HTML、CSS 和 JavaScript）。
嘿，这可能是下拉列表的 z-index 问题。尝试更改下拉菜单的背景和 z-index。你可能会对此有所了解。是的，正如@HiddenHobbes 所说，代码真的很有帮助。

【解决方案1】：

上述案例的问题只是透明背景。

附加到 DOM 的列表是

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-autocomplete-custom"></ul>

使用 CSS

.ui-autocomplete-custom {
    background: #87ceeb;
    z-index: 2;
}

这将为列表添加一种颜色，并且 z-index 将确保该元素位于另一个元素之上。

【讨论】：

【解决方案2】：

.ui-autocomplete { background-color: inherit; }

它对我有用。

【讨论】：

【解决方案3】：

我发现这是因为我遇到了问题，但它专门在 IOS 移动设备上

虽然上述方法均未奏效（上述方法的混合体）

如果上述方法不起作用，我认为这将很有用。

.ui-autocomplete {
    background-color: #fff;
}

【讨论】：

【解决方案4】：

我在动态添加输入字段并在其上初始化 Twitter Typeahead 时使用了 animate.css。还尝试了 Jquery Autocomplete 但没有运气，下拉列表显示出奇怪的行为并且总是透明的。删除 Animate.css 类对我有用。

【讨论】：