Jquery ui autocomplete positionnement incorrect

En utilisant jquery ui 1.8 essayant de compléter automatiquement

Tout fonctionne en dehors de cela, le menu ui n'est pas positionné sous mon élément d'entrée, mais plutôt dans le coin supérieur gauche.

Est-ce que quelqu'un a rencontré ce problème?

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

Et voici mon 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; } 

Et voici mon javascript:

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

Woohoo. Trouvé le coupable:

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

N'incluez pas jquery.dimensions.js. Je suppose que c'est déjà dans jquery-ui.js … de toute façon, cela a réglé mon problème.

Pour le dernier jqueryUI, vous devez maintenant inclure jquery.ui.position.js

J'ai simplement changé mon jquery-ui.min.js à la dernière version et il a réparé le positionnement.

Du 1.8.16 au 1.8.23 et cela a fonctionné!

J'ai eu un problème similaire, et après avoir trouvé, j'ai découvert que je manquais un JS pour résoudre ce problème. Dans le cas où quelqu'un s'arrête, assurez-vous d'avoir aussi un script "jquery.ui.position.js".

Voir http://jqueryui.com/demos/autocomplete/ sous les dépendances: UI Core UI Widget UI Position

La simple mise à jour de la dernière JQueryUI m'a fait l'affaire. J'ai commencé à avoir ce problème après avoir changé de Twitter Bootstrap (et le dernier JQuery je pense aussi).

Je sais que c'est un ancien poste, mais j'ai simplement eu cette question et l'ai réglé d'une autre manière.

J'avais mis à jour jQuery, qui a fait apparaître le menu à left:0; top:0; Sur la window , plutôt que bien au-dessous de mes commentaires.

La mise à jour de jQuery UI l'a corrigé instantanément. J'espère que cela est utile pour quelqu'un.

Mettez à jour Jquery UI et jQuery scripts dans votre projet, il résoudra tout conflit et le problème sera réparé.

mettre

 position: relative; 

à l'intérieur de

 #searchFormWrapper 

Un autre problème similaire, si vous utilisez un CDN pour servir vos fichiers jquery, assurez-vous d'utiliser une version spécifique, c'est-à-dire:

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

Plutôt que la dernière version:

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

Cela supprimera la possibilité de conflits dans les versions futures de jquery, qui peut souvent interrompre une application lorsque la version 'dernière' de jquery est mise à jour sur le CDN.