Set the z-index value of a jQuery autocomplete inp

问题:

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?

回答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

回答2:

This code solved problem with z-index for me (jQueryUI 1.8) without any extra CSS or timeouts

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

回答3:

You don't really need to fiddle with the z-index -

.shadow {
  -moz-box-shadow:    2px 2px 2px 1px #ccc;
  -webkit-box-shadow: 2px 2px 2px 1px #ccc;
  box-shadow:         2px 2px 2px 1px #ccc;
}

DEMO