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

Question

I am trying to use jquery autocomplete on one of my textfields, and everything seems to be ok except for the fact that the dropdown is transparent for some reason.

I am linking both jquery-ui.js and jquery-ui.css, both are version 1.11.4. It seems to be loading the values ok, the transparency of the dropdown seems to be the only problem. My js code is as simple as it can get:

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

here is a screenshot of what it looks like:

I have looked around and have not found the same issue.

Thank you.

Answer 1

The issue with the above case was just the transparent background.

The list that is appended to the DOM is

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

with the CSS

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

This would add a color to the list, and z-index would ensure the element lies above another element.

Answer 2

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

这个对我有用。

Answer 3

I found this as I had an issue but it was specifically on an IOS mobile device

Whilst none of the above worked the following (a hybrid of the above did)

I think this will be useful should the above not work.

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

Answer 4

I was using animate.css while dynamically adding Input Fields and initializing Twitter Typeahead on the same. Also tried Jquery Autocomplete but no luck, the dropdowns showed weird behaviour and were always transparent. Removing the Animate.css class did the trick for me.