example - jquery autocomplete source

jQueryUI autocomplete no funciona con diálogo y zIndex

Question

Me encontré con un problema interesante con el autocompletado de jQueryUI en un cuadro de diálogo.

Mi diálogo HTML se ve así:

<div id="copy_dialog">
    <table>
        <tbody>
            <tr>
                <th>Title:</th>
                <td><input type="text" class="title" name="title"></td>
            </tr>
            <tr>
                <th>Number:</th>
                <td><input type="text" name="number"></td>
            </tr>
        </tbody>
    </table>
</div>

Cuando ejecuto el autocompletado jQueryUI en el HTML anterior, funciona perfecto.

Cuando lo abro usando el diálogo

$(''#copy'').click(function()
{
    $(''#copy_dialog'').dialog({
        autoOpen: true,
        width: 500,
        modal: false,
        zIndex: 10000000,
        title: ''Duplicate'',
        buttons: {
            ''Cancel'': function()
            {
                $(this).dialog(''close'');
            },
            ''Save'': function()
            {
                $(this).dialog(''close'');
            }
        }
    });

    return false;
});

Luego, en FireBug, puedo ver que la función autocompletar sigue funcionando. Está solicitando y recibiendo resultados, pero ya no veo una lista de opciones debajo del campo de entrada.

Mi idea es que esto tiene algo que ver con el zIndex en el cuadro de diálogo que es mucho mayor que el que ofrece el menú de autocompletar, pero no estoy seguro. Todavía estoy investigando los detalles exactos de lo que está sucediendo, pero espero que alguien aquí tenga una idea para mí.

Editar Intenté eliminar el zIndex del diálogo y mi autocompletar comienza a aparecer. Desafortunadamente, necesito ese valor de zIndex para superar el zIndex tremendamente alto de la barra de menú, que no puedo cambiar (no tengo acceso a esa área del código). Entonces, si hay una manera de agregar un zIndex a la autocompletar, eso sería fantástico; hasta entonces, probablemente elimine el zIndex del diálogo y me asegure de que no aparezca en la zona de la barra de menú.

Answer 1

appendTo: a qué elemento debe anexarse ​​el menú. Cuando el valor es nulo, los padres del campo de entrada serán verificados para una clase de "ui-front". Si se encuentra un elemento con la clase "ui-front", el menú se agregará a ese elemento. Independientemente del valor, si no se encuentra ningún elemento, el menú se agregará al cuerpo.

Esto significa que <div id="copy_dialog" class="ui-front"> hará el truco. No es necesario usar la opción appendTo , eso no funcionó para mí.

Answer 2

1. Crear el diálogo
2. Activar autocompletar

Esto indica a jquery que el autocompletado está en un diálogo y tiene la información disponible para manejar índices z.

Answer 3

Al perseguir este problema yo mismo descubrí que appendTo debe establecerse antes de que se abra el diálogo. Lo mismo parece aplicarse a la configuración (o modificación) de la propiedad de origen.

$("#mycontrol").autocomplete({appendTo:"#myDialog",source:[..some values]})
$("#mycontrol").autocomplete("option","source",[...some different values]) // works

// doesn''t work if the lines above come after
$("#myDialog").dialog("open")

Esto podría ser simplemente un subproducto de lo que hace el diálogo abierto, o no abordar correctamente el elemento. Pero el orden en que suceden las cosas parece importar.

Answer 4

Al usar jQuery UI 1.10, no debe perder el tiempo con z-indexes ( http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option ). La opción appendTo funciona, pero limitará la visualización a la altura del diálogo.

Para solucionarlo: asegúrese de que el elemento de autocompletar esté en el orden DOM correcto con: autocompletar .insertAfter ( dialog .parent ())

Ejemplo

 var autoComplete,
     dlg = $("#copy_dialog"),
     input = $(".title", dlg);

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());

Actualización para el problema del índice Z después de hacer clic en el cuadro de diálogo

El índice Z de la autocompleta parece cambiar después de hacer clic en el cuadro de diálogo (según lo informado por MatteoC). La solución a continuación parece solucionar esto:

Ver violín: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});

Answer 5

Cambiar el índice z solo funciona la primera vez que se abre el menú desplegable, una vez cerrado, la ventana de diálogo se da cuenta de que ha sido "engañado" y actualiza su índice Z.

También para mí, cambiar el orden de creación del diálogo y autocompletar realmente era una molestia (creo que un gran sitio web, toneladas de páginas) pero, por casualidad, tenía mi propia función openPopup que envolvía a openDialog. Así que se me ocurrió el siguiente truco

$("#dialog").dialog({ focus: function () {
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10);
    $(this).find(".ui-autocomplete-input").each(function (i, obj) {
        $(obj).autocomplete("widget").css("z-index", dialogIndex + 1)
    });
});

Cada vez que el diálogo tiene el foco, es decir, en la primera apertura y cuando se cierra el autocompletado, cada índice z de la lista de autocompletado se actualiza.

Answer 6

Este enlace funcionó para mí.

https://github.com/taitems/Aristo-jQuery-UI-Theme/issues/39

Estoy usando jquery-ui-1.10.3.

Configuré el cuadro combinado autocompletar dentro del evento "abrir" del cuadro de diálogo jquery.

Answer 7

Intenté todo lo que se menciona aquí (algunos fallaron siempre que sobrevivo los elementos y vuelva a aparecer), pero esto es lo único que funcionó para mí en todos los casos:

$("selector").autocomplete({
    ...
    appendTo: "body",    // <-- do this
    close: function (event, ui){
        $(this).autocomplete("option","appendTo","body");  // <-- and do this  
    }
});    

Answer 8

Intenta configurar la opción appendTo como "#copy_dialog" :

$(/** autocomplete-selector **/)
    .autocomplete("option", "appendTo", "#copy_dialog");

Esta opción especifica a qué elemento se agrega el menú de autocompletar. Al agregar el menú al diálogo, el menú debe heredar el índice z correcto.

Answer 9

La opción ''appendTo'' no siempre funciona.

Lo más notable es que no se mostrará más allá del alto del diálogo, pero también, si está utilizando una utilidad de terceros (por ejemplo, el editor DataTables), no siempre tiene control sobre cuándo se está creando un diálogo, una entrada, etc. cuando están conectados al DOM, qué ID tienen, etc.

Esto parece funcionar siempre :

$(selector).autocomplete({
    open: function(event, ui){
        var dialog = $(this).closest(''.ui-dialog'');
        if(dialog.length > 0){
            $(''.ui-autocomplete.ui-front'').zIndex(dialog.zIndex()+1);
        }
    }
});

Answer 10

La solution de user1357172 funcionó para mí, pero en mi opinión necesita dos imprevistos.

Si appendTo se establece en null , podemos encontrar el elemento .ui-front más .ui-front lugar de .ui-dialog , porque nuestro autocomplete ya debe estar adjunto. Entonces deberíamos cambiar el z-index solo para el widget relacionado (lista ul relacionada) en lugar de cambiar todos los elementos existentes con la clase .ui-autocomplete.ui-front . Podemos encontrar el widget relacionado usando elem.autocomplete(''widget'')

Solución:

elem.autocomplete({
    open: function(event, ui){
        var onTopElem = elem.closest(''.ui-front'');
        if(onTopElem.length > 0){
            var widget = elem.autocomplete(''widget'');
            widget.zIndex(onTopElem.zIndex() + 1);
        }
    }
});

Por cierto, esta solución funciona, pero parece poco hacky, por lo que probablemente no sea la mejor.

Answer 11

Lo que funcionó para mí fue una combinación de la publicación anterior. Agregué el ID myModal en lugar de body y agregué el evento close también.

$("selector").autocomplete({
    ...
    appendTo: "#myModalId",    // <-- do this
    close: function (event, ui){
        $(this).autocomplete("option","appendTo","#myModalId");  // <-- and do this  
    }
}); 

Answer 12

Recuerdo haber tenido un problema similar con autocompletar y zIndex, y tuve que solucionarlo especificando la opción appendTo: $(selector).autocomplete({appendTo: "#copy_dialog"})

Esto también es útil si tiene una autocompletar dentro de un elemento posicionado. El problema específico que tenía era una autocompletar dentro de un elemento de posición fija que permanecía en su lugar mientras el cuerpo principal se desplazaba. El autocompletado se mostraba correctamente, pero luego se desplazaba con el cuerpo en lugar de permanecer fijo.

Answer 13

Solución súper simple. Aumente el índice z para la autocompleta. Cuando está activo, estoy bastante seguro de que lo quieres arriba :)

.ui-autocomplete {
 z-index: 2000;
}

Answer 14

open:function(event){

        var target = $(event.target); 
        var widget = target.autocomplete("widget");
        widget.zIndex(target.zIndex() + 1); 

},