jquery 自動完成下拉菜單是透明的

Question

我正在嘗試在我的一個文本字段上使用 jquery 自動完成功能，除了下拉菜單由於某種原因是透明的這一事實外，一切似乎都正常。

我正在鏈接 jquery-ui.js 和 jquery-ui.css，兩者都是 1.11.4 版。 它似乎正在加載值，下拉列表的透明度似乎是唯一的問題。 我的 js 代碼非常簡單：

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

這是它的外觀截圖：

我環顧四周，沒有發現同樣的問題。

謝謝你。

Answer 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 將確保該元素位於另一個元素之上。

Answer 2

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

這個對我有用。

Answer 3

我發現這個是因為我遇到了問題，但它特別是在 IOS 移動設備上

雖然以上沒有一個工作以下（以上的混合）

我認為如果上述方法不起作用，這將很有用。

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

Answer 4

我正在使用 animate.css，同時動態添加輸入字段並在同一個上初始化 Twitter Typeahead。 還嘗試了 Jquery 自動完成但沒有運氣，下拉菜單顯示出奇怪的行為並且總是透明的。 刪除 Animate.css 類對我有用。