jQuery UI autouzupełnianie pozycjonowanie źle

Question

użyciu jQuery UI 1.8 próbuje autouzupełniania

wszystko działa oprócz że ui-menu nie jest umieszczony pod moim elementu wejściowego, ale raczej w górnym lewym rogu.

Czy ktoś napotkał ten problem?

Oto mój 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> 

i tu jest mój 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; 
} 

i tu jest mój javascript:

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

Answer 1

Woohoo. Znaleziono winowajcę:

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

Nie zawierają pliku jquery.dimensions.js. Zakładam, że już jest w jquery-ui.js ... w każdym razie to naprawiło mój problem.

Na najnowszej jQueryUI teraz trzeba to jquery.ui.position.js

Answer 2

umieścić

position: relative; 

wewnątrz

#searchFormWrapper 

Answer 3

Miałem podobny problem, a po wyszukaniu I okazało się, że brakowało JS, aby to naprawić. Jeśli ktoś się zatrzyma, upewnij się, że został wywołany skrypt "jquery.ui.position.js".

Zobacz http://jqueryui.com/demos/autocomplete/ podstawie zależności: UI UI Podstawowych Widget UI stanowisko

Answer 4

Inny podobny problem, jeśli używasz CDN służyć pliki jquery, upewnij się użyć określonej wersji, czyli:

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

Zamiast '' najnowszej wersji:

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

Th usunie możliwość konfliktów w przyszłych wydaniach jquery, które często mogą przerwać aplikację, gdy najnowsza wersja jquery zostanie zaktualizowana na CDN.

Answer 5

Po prostu aktualizacja do najnowszego JQueryUI zrobiła dla mnie tę sztuczkę. Zacząłem mieć ten problem po tym, jak przełączyłem się na Twitter Bootstrap (a także najnowsze JQuery, które też myślę).

Answer 6

Po prostu zmieniłem mój jquery-ui.min.js na najnowszą wersję i naprawiłem pozycjonowanie.

od 1.8.16 do 1.8.23 i zadziałało!

Answer 7

Wiem, że to stary post, ale po prostu miałem ten problem osobiście i naprawiłem go w inny sposób.

Zaktualizowałem jQuery, co spowodowało, że menu pojawiło się pod left:0;top:0; na window, a nie ładnie pod moim wpisem.

Aktualizacja jQuery UI naprawiła go natychmiast. Mam nadzieję, że przyda się komuś.

Answer 8

Zaktualizuj JQuery UI i skrypty jQuery w swoim projekcie, rozwiąże wszelkie konflikty i problem zostanie rozwiązany.