jQuery-UI's autocomplete not display well, z-index issue

Question

I\'m currently implementing jQuery UI\'s autocomplete in my clients webshop. The problem is: the element the autocomplete resides in, has a higher z-index then the z-index of th

Answer 1

Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1

Answer 2

If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.

Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?

Answer 3

Use z-index and !important

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

Answer 4

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

Answer 5

For those developers that still use this plugin. Try this:

.acResults
{
    z-index:1;
}

For me was enough with z-index:1, set the value you need in your case.

Answer 6

also have a look at where you are appending the item to. i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.