jQuery UI posizionamento di completamento automatico sbagliato

Question

utilizzando jQuery UI 1.8 cercando di completamento automatico

Tutto funziona a parte che l'interfaccia utente-menu non è posizionato sotto il mio elemento di input, ma piuttosto in alto a sinistra.

Qualcuno si è imbattuto in questo problema?

Ecco il mio html:

<div id="search"> 
    <div id="searchFormWrapper"> 
     <form method="post" name="searchForm" id="searchForm" action="/searchresults"> 
     <label for="searchPhrase" id="searchFor"> 
      Search for</label> 
     <input name="searchPhrase" id="searchPhrase" type="text" /> 
     <label for="searchScope" id="searchIn"> 
      in</label> 
     <select name="searchScope" id="searchScope"> 
      <option value="">All Shops</option> 
      ... 
     </select> 
     <input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif" 
      alt="Search ..." /> 
     </form> 
     <br class="clear" /> 
    </div> 
</div> 

e qui è 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 
    }); 
}); 

Answer 1

Woohoo. Trovato il colpevole:

<script type="text/javascript" src="/scripts/jquery/132/jquery-1.4.2.min.js"></script> 
      <script type="text/javascript" src="/scripts/jquery/132/jquery-ui-1.8.custom.min.js"></script> 
      <script type="text/javascript" src="/scripts/jquery/100325/jquery.dimensions.js"></script> 
      <script type="text/javascript" src="/scripts/jquery/100325/jquery.tooltip.js"></script> 

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

Per ultima jQueryUI è ora necessario includere jquery.ui.position.js

Answer 2

messo

position: relative; 

all'interno di

#searchFormWrapper 

Answer 3

ho avuto un problema simile, e dopo una ricerca 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/ sotto le dipendenze: UI core UI Widget UI Posizione

Answer 4

Un altro problema simile, se si sta utilizzando una CDN per servire i file jQuery, assicurarsi di utilizzare una versione specifica, vale a dire:

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

piuttosto che la versione 'ultima':

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

Th Verrà rimossa 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.

Answer 5

Semplicemente l'aggiornamento all'ultima JQueryUI ha 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).

Answer 6

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

da 1.8.16 a 1.8.23 e ha funzionato!

Answer 7

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; su window, piuttosto che sotto il mio input.

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

Answer 8

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