jquery ui posizionamento automatico incompleto

usando jquery ui 1.8 provando il completamento automatico

Tutto funziona a parte che l’ui-menu non è posizionato sotto il mio elemento di input, ma piuttosto nell’angolo in alto a sinistra.

Qualcuno ha incontrato questo problema?

Ecco il mio html:

 

ed ecco il mio css:

 #search { width:100%; margin:0; padding:0; text-align:center; height:36px; line-height:36px; background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left; overflow:hidden; font-size:12px; } #searchFormWrapper { width:520px; height:36px; overflow:hidden; margin:auto; padding:0; } label#searchFor { display:block; float:left; width:80px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } label#searchIn { display:block; float:left; width:20px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } #searchPhrase { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #searchScope { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #submitSearch { display:block; float:left; margin:7px 0 0 10px; padding:0; } 

e qui è il mio javascript:

 $(document).ready(function() { $("#searchPhrase").autocomplete( { source: "/search?json", minLength: 2 }); }); 

Woohoo. Trovato il colpevole:

     

Non includere jquery.dimensions.js. Presumo che sia già in jquery-ui.js … comunque, ha risolto il mio problema.

Per l’ultimo jqueryUI ora devi includere jquery.ui.position.js

Ho semplicemente cambiato il mio jquery-ui.min.js con l’ultima versione e ha corretto il posizionamento.

dal 1.8.16 all’1.8.23 e ha funzionato!

Ho avuto un problema simile, e dopo aver cercato ho scoperto che mi mancava un JS per risolvere questo problema. Nel caso qualcuno si fermi assicurati di avere anche lo script “jquery.ui.position.js”.

Vedi http://jqueryui.com/demos/autocomplete/ in dipendenze: UI Core UI Widget UI Position

Semplicemente aggiornando all’ultima JQueryUI ho fatto il trucco per me. Ho iniziato ad avere questo problema dopo che sono passato a Twitter Bootstrap (e anche l’ultimo JQuery che penso).

So che questo è un vecchio post, ma ho avuto questo problema e l’ho risolto in un altro modo.

Avevo aggiornato jQuery, che ha causato la visualizzazione del menu a left:0; top:0; sulla window , piuttosto che ben al di sotto del mio input.

L’aggiornamento di jQuery UI l’ha risolto all’istante. Spero che questo sia utile a qualcuno.

Aggiorna l’interfaccia utente di Jquery e gli script jQuery nel tuo progetto, risolverà qualsiasi conflitto e il problema verrà risolto.

mettere

 position: relative; 

all’interno

 #searchFormWrapper 

Un altro problema simile, se si sta utilizzando un CDN per servire i file jQuery, assicurarsi di utilizzare una versione specifica, ad esempio:

 //ajax.googleapis.com/ajax/libs/jquery/1.7.2/ 

Piuttosto che la versione “più recente”:

 //ajax.googleapis.com/ajax/libs/jquery/1/ 

Ciò eliminerà la possibilità di conflitti nelle versioni future di jquery, che possono spesso interrompere un’app quando la versione “più recente” su jQuery viene aggiornata sul CDN.