El autocompletado de jQuery-UI no se muestra bien, problema de índice z

Actualmente estoy implementando el autocompletado de jQuery UI en la tienda web de mis clientes. El problema es: el elemento en el que reside el autocompletado tiene un índice z más alto que el índice z del autocompletado. Intenté configurar el índice z de autocompletar manualmente, pero tengo la sensación de que jQuery UI está sobrescribiendo esto.

De hecho, mi pregunta es un duplicado del índice z incorrecto de la lista de sugerencias de autocompletar, ¿cómo puedo cambiar? , pero como no hubo respuesta, pensé en intentarlo de nuevo.

¡Cualquier ayuda es bienvenida!

Martijn

Utilice z-indexy!important

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

Mientras buscaba, encontré este tema (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Aparentemente, la única forma de cambiar el estilo del cuadro de autocompletar es haciéndolo a través de javascript:

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

Cambie el índice z de la Div principal, el menú de autocompletar tendrá el índice z de la div + 1

En el CSS de jQuery UI:

.ui-front { z-index: 9999; }

Pruebe esto, puede manipular el índice z en tiempo de ejecución o inicializar

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

Si puede aplicar un índice z más alto en la entrada de texto de autocompletar, esta es la solución a su problema.

La lista de opciones de Autocompletar de la interfaz de usuario de jQuery calcula su valor de índice z tomando el índice z de la entrada de texto a la que se adjunta y agrega 1 a ese valor.

Para que pueda dar un índice z de 999 a la entrada de texto, el autocompletado tendrá un valor de índice z de 1000

Tomado de http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

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

también eche un vistazo a dónde está agregando el elemento. Me encontré con este problema cuando agregué el autocompletar a un div interno, pero cuando agregué el autocompletar a la etiqueta del cuerpo, el problema desapareció.

Si está utilizando los cuadros de diálogo jquery-ui, tenga cuidado de inicializar los cuadros de diálogo ANTES de que se muestre el autocompletado o el autocompletado debajo del cuadro de diálogo.

Mire esta respuesta jquery UI autocompletar dentro de un cuadro de diálogo de interfaz de usuario modal: ¿no se muestran sugerencias?

Pruébelo de todos modos en su css (antes de cargar el script), no en firebug:

.ui-selectmenu-menu {
    z-index:100;
}

En mi caso, esto funciona y crea índices z como: 100x (por ejemplo, 1002)

agregue lo siguiente

.ui-autocomplete
{
    z-index:100 !important;
}

en el archivo jquery-custom-ui.css (o el minificado si lo está usando).

Para aquellos desarrolladores que todavía usan este complemento. Prueba esto:

.acResults
{
    z-index:1;
}

Para mí fue suficiente con z-index: 1, establezca el valor que necesita en su caso.