jquery-ui - microsoft - visual studio installer

La UI de jquery se completa automáticamente dentro de un diálogo de interfaz de usuario modal: ¿no se muestran las sugerencias?

Question

Estoy usando el widget de autocompletado de jquery ui dentro del diálogo de jquery ui. cuando escribo el texto de búsqueda, el cuadro de texto sangra (ui-autocomplet-loading) 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
});

Empresa es el ID del cuadro de texto para adjuntar el autocompletado.

Pensé que podría ser un índice az, así que configuro esto:

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

Pero todavía no se muestra. Pongo el autocompletado en una página ''regular'' y funciona bien.

Estoy usando jquery ui versión 1.8.2. ¿Alguna idea de dónde mirar?

Answer 1

Agregue el siguiente método a su javascript y llámelo desde el evento onload del elemento body:

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

Funciona para mí :) Lo obtuve al observar el estilo computado del diálogo modal para ver qué es el índice z. Entonces, toda la función es agarrar el cuadro de sugerencias automáticas creado por jquery (por uno de sus nombres de clase que puede ser diferente para ti 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 fue 1050)

Answer 2

Cuando utilice jQuery UI 1.10, no debe jugar 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 diálogo.

Para solucionarlo: asegúrese de que el elemento autocompletar esté en el orden correcto de DOM con: autocompletar .insertAfter ( diálogo .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 diálogo

El índice z del autocompletado parece cambiar después de hacer clic en el cuadro de diálogo (según informa MatteoC). La solución a continuación parece solucionar esto:

Ver fiddle: https://jsfiddle.net/sv9L7cnr/

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

Answer 3

En mi caso, agregar estilos en css no funciona, pero después de agregar la propiedad zIndex exactamente al constructor de elementos de jQuery ui, funciona como un encanto.

Answer 4

En su implementación de autocomplete , agregue appendTo: "#search_modal" , donde search_modal es el ID de su modal.

Answer 5

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

Usando appendTo trabajado, sorta ... Los elementos de autocompletado aparecieron donde se suponía que debían hacerlo, sin embargo, arrojó por completo mi ventana de diálogo en un lío confuso de elementos div colocados incorrectamente.

Así que en mi propio archivo css, creé lo siguiente:

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

Estoy seguro de que 1100 es un poco excesivo, pero solo quería jugar a lo seguro. Funciona bien y se ajusta al método KISS.

Estoy usando jQuery 1.9.2 con jQueryUI 1.10.2.

Answer 6

Estaba experimentando el mismo problema, cuando se me ocurrió:

Siempre declare su diálogo ANTES de configurar autocompletar.

Los he cambiado, et voilà!

Autocompletarse configurarse a sí mismo alrededor de la ENTRADA a la que se dirige Dialog crea un nuevo marcado y CSS alrededor del contenedor al que apunta. Mis opciones donde aparecen detrás del diálogo, o fuera de la pantalla.

Answer 7

Esto hizo el truco para mí:

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

Answer 8

Hace poco tuve el mismo problema. Agregando esto a mi archivo css, lo resolví para mí:

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

Primero probé el valor de su índice z inicial de 1006 , pero eso no funcionó. Incrementando el valor trabajado para mi.

Answer 9

La respuesta de Johann-S here funcionó para mí.

simplemente agregue data-focus = "false" al botón o enlace que llama al 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, no tiene que meterse con los índices z o anular el enfoque de ejecución de bootstrap (no se llama)

Answer 10

Lo resolví en bootbox así:

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

Solo tiene que adjuntar la lista de resultados a su formulario.

Answer 11

Prueba esto:-
my_modal : modal id
Usa la propiedad appendTo de autocomplete

$("#input_box_id").autocomplete({<br> source:sourceArray/link,<br> appendTo :"#<i>my_modal</i>"<br> }); referencia: https://.com/a/22343584/5803974

Answer 12

Resolví agregar el atributo z-index:1500 a mis divs en jquery.autocomplete.css porque Jquery UI Dialog puso z-index 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 13

Teníamos el mismo problema. Acabamos de actualizar nuestro css para que el índice z sea lo suficientemente alto y no se pueda sobrescribir:

.dropdown-menu {
z-index: 9999 !important;
}

Como añadir al cuerpo hace que el elemento secundario de $ window, debe hacer que todo el menú desplegable aparezca en el nuevo índice z.

Answer 14

Tengo el mismo problema, pero después de algunas dificultades, uso Firefox para encontrar una solución.

En Chrome, cuando se abre cualquier vista de autocompletar y desea inspeccionar el elemento, desaparecerá al hacer clic en cualquier componente.

pero

En Firefox, se mostrará continuamente para que podamos encontrar la vista en absoluto.

e hice lo mismo con eso, y encontré una clase que tiene un índice z

z-index: 1000

así que acabo de cambiar esto a más como

.pac-container{
z-index: 999999;
}

podría ser que esta solución de índice z no funcione para todos, pero estoy seguro de que la característica de Firefox definitivamente lo ayudará a encontrar la mejor solución.

Answer 15

Yo también tuve este problema. Estoy trabajando en UserFrosting que tiene bootstrap y select2, pero no tiene jquery-ui en el núcleo. Mi autocompletado estaba dentro de una ventana emergente modal donde la etiqueta del script y $(document) .ready están detrás del html para el formulario modal. Después de perseguir todo tipo de conflictos inexistentes e intentar convertir select2 (v 4) en un cuadro combinado, volví al hack de css y esto funcionó:

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

Mi entorno es

• UsuarioFrosting con jquery 1-11.2
• bootstrap-3.3.2,
• bootstrap-modal
• select2 v3.5.1
• jquery-ui-1.11.4 (tema dot-luv)

Answer 16

para uno o múltiples autocompletados en el mismo cuadro 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 17

 $("#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")
});
});
}