jquery UI autocompletar dentro de un cuadro de diálogo ui modal - ¿sugerencias que no se muestran?

Question

estoy usando el widget de autocompletar jquery ui dentro del diálogo jquery ui. cuando escribo el texto de búsqueda, el cuadro de texto dobla (ui-autocompletar-cargar) pero no muestra ninguna sugerencia.

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]; 

$("#company").autocomplete({   
    source : availableTags , 
minLength: 2 
}); 

compañía es la id del cuadro de texto para adjuntar la autocompletar.

pensé que podría ser un índice z Así que me puse esto:

.ui-autocomplete, .ui-menu, .ui-menu-item { z-index: 1006; } 

pero todavía no aparece. Puse el autocompletar en una página 'normal' y funciona bien.

estoy usando jquery ui versión 1.8.2. alguna idea de dónde mirar?

Answer 1

He resuelto añadiendo atributo z-index:1500 a mis divs en jquery.autocomplete.css porque jQuery UI de diálogo puso índice z entre 1000 y 1005

ul.auto-complete-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    z-index: 1500; 
    max-height: 250px; 
    overflow: auto; 
} 

Answer 2

En mi caso la adición de estilos en CSS no funciona , pero después de agregar la propiedad zIndex exactamente al constructor del elemento jQuery ui, funciona como un amuleto.

Answer 3

Encontré esta respuesta al buscar este mismo problema, sin embargo, ninguna de las soluciones era exactamente lo que quería.

Usando appendTo trabajaron, sorta ... Los artículos de autocompletar se presentaron en el que se suponía que, sin embargo, tiró por completo mi ventana de diálogo en un lío ilegible de elementos div inadecuadamente reposicionados.

Así que en mi propio archivo CSS, he creado el siguiente:

ul.ui-autocomplete { 
    z-index: 1100; 
} 

Estoy seguro de que 1100 es un poco exagerado, pero yo sólo quería ir a lo seguro. Funciona bien y se ajusta a los K.I.S.S. método.

Estoy usando jQuery 1.9.2 con jQueryUI 1.10.2.

Answer 4

añade el siguiente método a sus javascript y lo llaman desde el proceso de carga del elemento del cuerpo:

//initialization 
function init(){ 
    var autoSuggestion = document.getElementsByClassName('ui-autocomplete'); 
    if(autoSuggestion.length > 0){ 
     autoSuggestion[0].style.zIndex = 1051; 
    } 
} 

Funciona para mí :) Tengo esta mirando el estilo computarizada del cuadro de diálogo modal para ver qué era z-index Entonces, lo único que hace la función es tomar el cuadro de sugerencia automática creado por jquery (por uno de sus nombres de clase que pueden ser diferentes para usted pero la idea sigue siendo la misma) y modificar su CSS para incluir un índice z 1 punto más alto que el índice Z del modal (que era 1050)

Answer 5

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

Para solucionarlo: asegúrese de que el elemento de autocompletar está en el orden correcto, con DOM: autocompletar .insertAfter ( de diálogo.padre())

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 de índice z después de clic de diálogo

El índice z de la función de autocompletar parece cambiar después de un clic en el cuadro de diálogo (según lo informado por MatteoC). La solución más abajo parece solucionar este problema:

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

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

Answer 6

para uno o múltiples completa automáticamente en la misma caja de diálogo:

// init the dialog containing the input field 
$("#dialog").dialog({ 
     ... 
}); 

// initialize autocomplete 
$('.autocomplete').autocomplete({   
     source: availableTags, 
     minLength: 2 
}).each(function() { 
     $(this).autocomplete("widget").insertAfter($("#dialog").parent()); 
}); 

Answer 7

Recientemente tuve el mismo problema. La adición de este a mi css-archivo resuelto por mí:

.ui-autocomplete-input, .ui-menu, .ui-menu-item { z-index: 2006; } 

intentó por primera vez el valor del índice Z inicial de 1006, pero que no funcionó. Aumentar el valor funcionó para mí.

Answer 8

Esto hizo el truco para mí:

ul.ui-front { 
    z-index: 1100; 
} 

Answer 9

$("#company").autocomplete({   
    source : availableTags , 
    appendTo : $('#divName') 
    minLength: 2 
}); 

Nota: $ ('# divName') divName será el nombre del cuerpo modal.

Ejemplo:

<form id="exportOrder"> 
     <div class="input-group"> 
      <input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px"> 
     </div> 
    </div> 
</form> 

self.AttachAutoComplete = function() { 
        $('#accountReferenceSearch').focus(function() { 
         $('#accountReferenceSearch').autocomplete({ 
          source: function (request, response) {}, 
          minLength: 2, 
          delay: 300, 
          appendTo: $("#exportOrder") 
         }); 
        }); 
       } 

Answer 10

Lo resuelto en bootbox así:

$("#company").autocomplete({  
    source : availableTags , 
    appendTo: "#exportOrder" 
}); 

Sólo tiene que añadir la lista de resultados a su formulario.

Answer 11

que estaba experimentando el mismo problema, cuando se me ocurrió:

declarar siempre el diálogo antes de la configuración de autocompletar.

¡Los he cambiado, y listo!

Autocompletar se configura alrededor de la ENTRADA que usted apunta. Dialog crea un nuevo marcado y CSS alrededor del contenedor al que se dirige. Mis elecciones aparecen detrás del diálogo o fuera de la pantalla.

Answer 12

Tuve este problema también. Estoy trabajando en UserFrosting que tiene bootstrap y select2, pero no tiene jquery-ui en el núcleo. Mi autocompletar estaba dentro de un menú emergente modal donde la etiqueta del script y $(document) .ready están después del html para el formulario modal. Después de perseguir todo tipo de conflictos inexistentes y tratando de hacer select2 (v 4) en un cuadro combinado, fui de nuevo a la corte CSS y esto funcionó:

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

Mi entorno es

• UserFrosting con jQuery 1-11.2
• bootstrap-3.3.2,
• de arranque-modal
• select2 v3.5.1 (tema del punto-Luv)
• jquery-ui-1.11.4

Answer 13

En su aplicación autocomplete, añadir appendTo: "#search_modal", donde es search_modal ID de tu modal

Answer 14

intenta esto: -
my_modal: modal Identificación
Uso appendTo puntal de autocomplate

$ ("# input_box_id") autocompletar ({
fuente: sourceArray/enlace,
. appendTo: "# my_modal"
});

referencia: respuesta https://stackoverflow.com/a/22343584/5803974

Answer 15

Johann-S 'here trabajó para mí.

sólo tiene que añadir los datos de enfoque = "false" al botón o enlace de llamar a la modal como

<button type="button" class="btn btn-primary" 
data-toggle="modal" 
data-focus="false" 
data-target=".bd-example-modal-sm">Small modal</button> 

De esta manera usted no tiene que meterse con índices de z o anulación de bootstrap de hacer cumplir enfoque (que no es llamado)