Tengo un «ventana modal» en una página web que se obtiene al aplicar a un div la propiedad css position a fixed. El div contiene campos de entrada. En particular, estoy usando el autocompletar widget de jQueryUI. Hay dos problemas principales:

1) la primera es que, dado que el div tiene una posición fija, cuando se desplaza hacia abajo por la página web, las sugerencias de autocompletar no se muestran fijos, sino que se mueven hacia arriba y hacia abajo con la página. Usted puede ver que el problema en este Codepen donde yo estoy usando un ejemplo de jQuery sitio web de la ciudad del nombre de la función de autocompletar.

2) El segundo problema es que las sugerencias de autocompletar se muestra en la esquina superior izquierda de la página y no justo debajo del campo de entrada. Desgraciadamente, he intentado reproducir este problema en Codepen, pero no puedo.

Estoy bastante seguro de que el problema es debido a la CSS, y en particular a tales propiedades de estilo proporcionadas por el JQuery-UI. Tal vez el problema puede ser resuelto mediante el uso de la opción de posición de la función de autocompletar widget.

¿Qué propiedad de CSS debería definir y cómo?

PS: yo uso el tema siempre en http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.

InformationsquelleAutor JeanValjean | 2012-09-02

3 Comentarios

  1. 47

    Buscando en la biblioteca de UI de jQuery, veo que el <ul> elemento se utiliza para mostrar las sugerencias. jQuery UI, que se anexa a este elemento por defecto para el documento HTML y no a la <div> (utilizado como «ventana modal») del texto de entrada.

    Sin embargo, la documentación muestra que la opción appendTo configura el elemento que la función de autocompletar <ul> debe ser añadido. Utiliza jQuery appendTo() función.
    http://jqueryui.com/demos/autocomplete/#option-appendTo

    Así, he incluido un div que contiene las sugerencias:

    <input type="text" id="myInput" />
    <div id="container">
    </div>

    Y en el autocomplete() función he añadido la opción:

    appendTo: "#container"

    Luego he añadido el siguiente CSS

    #container {
        display: block; 
        position:relative
    } 
    .ui-autocomplete {
        position: absolute;
    }

    ¡Eso es todo!

    • Gracias por compartir tu respuesta. Sólo se utiliza una solución similar con appendTo para un problema donde la función de autocompletar que las sugerencias se muestran en la posición incorrecta con un conjunto de marcos basados en la lectura de su respuesta. 🙂
    • No lo menciona 😉
    • No solucionado mi problema, pero todos los que tratando de arreglar eso en primer lugar, compruebe si dispone de la última jquery-ui versión. Inicialmente tengo la versión 1.8.bla y era defectuoso, pero después de actualizar a la 1.10.2 todos los que trabajan.
    • Esto salvó mi vida hoy!
    • Tuve un problema cuando el contenedor de la entrada(activación de la función autocompletar lista desplegable) se desplaza por la lista que se fija a la pantalla. El uso de JeanValjean del método que agregar un contenedor justo después de la entrada y el uso de ‘appendTo’ resuelto mi problema. Sin CSS necesario. Gracias!
    • unos años más tarde y esta modificación se aplica todavía…

  2. 2

    Asegúrese de que sólo carga una versión de Jquery y una de la interfaz de usuario
    Esto lo descubrí después de leer @Riapp la respuesta, he jugado a su alrededor y pudo ver que necesita la coincidencia de los números de versión y nunca demasiados….

    De lo contrario, la función de autocompletar será absoluta, y volar a la parte superior.

     <script type="text/javascript"
        src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css"
        href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
  3. 1

    tenía el mismo problema. Eliminar jquerUI base de temas, Desinstalar jqueryUI de la biblioteca, a continuación, vuelva a instalar jqueryUI y ahora funciona bien. No estoy seguro de lo que estás trabajando, pero estoy en MVC4 de tantos errores, estoy a punto de matarme. La Buena Suerte.

    EDIT: esto era el verdadero problema

    Mirando un antiguo proyecto para ver si la función de autocompletar estaba trabajando hemos encontrado que muchos de los estilos en el antiguo proyecto no estaban en la versión más reciente. No estoy seguro si me borran de ellos, pero no puedo imaginar a hacerlo. Todo lo que tenía que hacer era copiar y pegar las clases que faltan de mi nuevo proyecto y todo volvió a la normalidad. Creo que alguien está saboteando mi proyecto.

Dejar respuesta

Please enter your comment!
Please enter your name here