Set the z-index value of a jQuery autocomplete input a level above the result list itself

Question

The default behavior for the jQuery Autocomplete widget is to position the results list one z-index level above the input so that the latter is always visible but in my case this has the undesirable effect of overshadowing the text input element.

I tried to set the z-index value input element at least one level above that of the result list from within the open method like so without much success:

open: function () {
    setTimeout(function () {
        $(this).css('zIndex', 10000);
    }, 1);
},
close: function () {
    $(this).css('zIndex', 0);
}

The z-index level for the input element does get promoted to 10000 while that of the results list remains at level 1 but the input element still appears underneath it.

Does anyone have a clue on why this is happening? The position attributes for the results list and input element are set to absolute and relative respectively. Could that be the cause?

Answer 1

You can do it by adding a simple rule to your styleseet:

#your_input {
    position: relative;
    z-index: 10000;
}
.ui-autocomplete {
     z-index: 9999 !important;
}

That should do all the work, I tested it in the firebug