javascript - event - jquery autocomplete combobox

La autocompleta de jQuery-UI no se muestra bien, problema z-index

Question

Actualmente estoy implementando la función autocompletar 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 de la autocompleta. Intenté configurar manualmente el índice Z autocompletado, pero tengo la sensación de que jQuery UI está sobreescribiendo esto.

De hecho, mi pregunta es un duplicado de la lista de sugerencias de autocompletar incorrecto z-index, ¿cómo puedo cambiar? , pero como no había respuesta, pensé en darle otra oportunidad.

Cualquier ayuda es bienvenida!

Martijn

Answer 1

¿Por qué no usar z-index y ! Important ?

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

Answer 2

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

Answer 3

En el CSS de jQuery UI :

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

Answer 4

Intente 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);
    }
});

Answer 5

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 hacerlo a través de javascript:

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

Answer 6

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.

Answer 7

Pruébalo de todos modos en tu 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)

Answer 8

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

La lista de opciones de autocompletado de jQuery UI calcula su valor de índice z tomando el índice z de la entrada de texto a la que se está adjuntando y agrega 1 a ese valor.

Entonces puede dar un índice z de 999 a la entrada de texto; la autocompleta tendrá un valor de índice z de 1000

Tomado de bugs.jqueryui.com/ticket/5489

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

Answer 9

También eche un vistazo al lugar donde está agregando el artículo. 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ó.

Answer 10

agregue lo siguiente

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

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

Answer 11

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