jQueryUI Autocompletar se muestra en lugar equivocado cuando se utiliza en el campo de entrada div con posición: fijo

Question

que tienen una "ventana modal " en una página web que resulte de aplicar a un div la propiedad CSS position a fixed. El div contiene campos de entrada. En particular, estoy usando el widget de autocompletar de jQueryUI. Hay dos problemas principales:

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

2) El segundo problema es que las sugerencias de autocompletar se muestran en la esquina superior izquierda de la página y no solo debajo del campo de entrada. Desafortunadamente, traté de reproducir este problema en Codepen, pero no puedo.

Estoy bastante seguro de que el problema se debe a la CSS, y en particular a las propiedades de estilo proporcionadas por la JQuery-UI. Tal vez el problema se puede resolver utilizando el position option del widget de autocompletar.

¿Qué propiedad de CSS debo definir y cómo?

PD: utilizo el tema proporcionado en http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.

Answer 1

Al observar la biblioteca jQuery UI, veo que el elemento < ul> se usa para mostrar las sugerencias. jQuery UI anexa este elemento de forma predeterminada al documento HTML y no al < div> (utilizado como "ventana modal") del texto entrada.

Sin embargo, la documentación muestra que la opción appendTo configura qué elemento de la autocompletar < ul>, deberían ser agregadas a. Utiliza la función appendTo() de jQuery. http://jqueryui.com/demos/autocomplete/#option-appendTo

Por lo tanto, he incluido un div que contiene las sugerencias:

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

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

appendTo: "#container" 

Luego añade el siguiente CSS

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

¡Eso es todo!

Answer 2

tuvo el mismo problema. Elimine los temas básicos de jquerUI, desinstale la biblioteca jqueryUI y luego vuelva a instalar jqueryUI y ahora funciona correctamente. No estoy seguro de con qué estás trabajando pero estoy en MVC4 tantos errores, estoy a punto de suicidarme. Buena suerte.

EDIT: este fue el verdadero problema

Al analizar un proyecto más para ver si el autocompletar estaba trabajando, se encontró que muchos de los estilos en el proyecto mayor no se encontraban en la más reciente. No estoy seguro de si los borré pero no me lo puedo imaginar. Todo lo que tenía que hacer era copiar y pegar aquellas clases que faltaban en mi nuevo proyecto y todo volvió a la normalidad. Creo que alguien está saboteando mi proyecto.

Answer 3

Asegúrese de que sólo se carga una versión de jQuery y uno de la interfaz de usuario descubrí esto después de leer la respuesta de @ Riapp, jugaba alrededor y pudo ver que es necesario que coincidan con números de versión y no demasiados ....

De lo contrario, la autocompleta será absoluta y volará a la cima.

<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" />