jQueryUI completamento automatico mostrato in posto sbagliato quando si usa campo di inserimento nel div con position: fixed

Question

Ho un "finestra modale" in una pagina web ottenuta applicando ad un div la proprietà CSS position-fixed. div contiene campi di input. In particolare, sto utilizzando il widget di completamento automatico da jQueryUI. Esistono due problemi principali:

1) il primo è che, poiché il div ha una posizione fissa, quando si scorre verso il basso nella pagina Web, i suggerimenti di completamento automatico non vengono visualizzati corretti ma spostati verso l'alto e verso il basso nella pagina. È possibile vedere questo problema in questo Codepen dove sto utilizzando un esempio dal sito Web jQuery con completamento automatico nome-città.

2) Il secondo problema è che i suggerimenti del completamento automatico vengono visualizzati nell'angolo in alto a sinistra della pagina e non solo sotto il campo di input. Sfortunatamente, ho provato a riprodurre questo problema in Codepen, ma non posso.

Sono abbastanza sicuro che il problema sia dovuto al CSS e in particolare alle proprietà di stile fornite dall'interfaccia utente JQuery. Forse il problema può essere risolto utilizzando lo position option del widget di completamento automatico.

Quale proprietà CSS dovrei definire e come?

PS: utilizzo il tema fornito allo http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.

Answer 1

Guardando la libreria dell'interfaccia utente di jQuery, vedo che l'elemento ul> viene utilizzato per mostrare i suggerimenti. L'interfaccia jQuery aggiunge questo elemento per impostazione predefinita al documento HTML e non allo < div> (utilizzato come "finestra modale") del testo input.

Tuttavia, la documentazione mostra che l'opzione appendTo configura quale elemento completamento automatico < ul> deve essere aggiunto. Usa la funzione appendTo() di jQuery. http://jqueryui.com/demos/autocomplete/#option-appendTo

Così, ho inserito un div per contiene i suggerimenti:

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

E nella funzione autocomplete() ho aggiunto l'opzione:

appendTo: "#container" 

poi ho aggiunto il seguente CSS

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

Questo è tutto!

Answer 2

ha avuto lo stesso problema. Elimina i temi base di jquerUI, disinstalla la libreria jqueryUI, quindi reinstalla jqueryUI e ora funziona correttamente. Non sono sicuro di cosa stai lavorando, ma sono su MVC4 così tanti bug, sto per uccidermi. In bocca al lupo.

EDIT: questo è stato il vero problema

Guardando a un progetto più vecchio per vedere se il completamento automatico lavorava abbiamo scoperto che molti degli stili nel progetto anziani non erano nel più recente. Non sono sicuro se li ho cancellati ma non riesco a immaginare di farlo. Tutto quello che dovevo fare era copiare e incollare quelle classi che mancavano dal mio nuovo progetto e tutto tornò alla normalità. Penso che qualcuno stia sabotando il mio progetto.

Answer 3

Assicurati di caricare solo una versione di jQuery e uno dell'interfaccia utente ho scoperto questo dopo aver letto la risposta di @ Riapp, ho giocato in giro e potrebbe vedere che avete bisogno di corrispondenti numeri di versione e mai troppi ....

Altrimenti il ​​completamento automatico sarà assoluto e volerà verso l'alto.

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