miércoles, 18 de abril de 2012



Como colocar los resultados del jquery-autocomplete sobre una caja de dialogo (dialog box) de JQuery-UI.



Primero se debe ubicar el evento de click que habilita la caja de dialogo
jQuery( "#XXXX" )
.button()
.click(function() {
jQuery( "#XXXX" ).dialog( "open" );
});
Y agregan este código para que se permitan ventanas a mayor nivel
jQuery(".ui-dialog").css("overflow", "visible");
quedando algo así:
jQuery( "#XXXX" )
.button()
.click(function() {
                         jQuery( "#XXXX" ).dialog( "open" );
                         jQuery(".ui-dialog").css("overflow", "visible");
});
Finalmente solo deben editar el css del  jquery-autocomplete (jquery.autocomplete.css) y agregar la siguiente linea de código, para aumentar en nivel en pantalla del resultado al auto completar.
z-index: 1003; (o superior según el nivel que vean que tenga la caja de dialogo).
Quedando un fragmento de código así
.acResults {
padding: 0px;
border: 1px solid WindowFrame;
background-color: Window;
overflow: hidden;
z-index: 1003;
}
Espero que les sea de utilidad

No hay comentarios:

Publicar un comentario