Javascript jquery ui自动完成定位错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2560205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ui autocomplete positioning wrong
提问by autonomatt
using jquery ui 1.8 trying autocomplete
使用 jquery ui 1.8 尝试自动完成
Everything works apart from that the ui-menu isn't positioned under my input element, but rather in the top left corner.
除了 ui-menu 不在我的输入元素下，而是在左上角之外，一切正常。
Has anyone come across this problem?
有没有人遇到过这个问题？
Here's my html:
这是我的 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>
and here's my css:
这是我的 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;
}
and here's my javascript:
这是我的javascript：
$(document).ready(function()
{
$("#searchPhrase").autocomplete(
{
source: "/search?json",
minLength: 2
});
});
回答by autonomatt
Woohoo. Found the culprit:
呜呼。找到罪魁祸首：
<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>
Don't include jquery.dimensions.js. I assume it's already in jquery-ui.js ... anyway, it fixed my problem.
不要包含 jquery.dimensions.js。我认为它已经在 jquery-ui.js 中......无论如何，它解决了我的问题。
For latest jqueryUI you now need to include jquery.ui.position.js
对于最新的 jqueryUI，您现在需要包含 jquery.ui.position.js
回答by Todd
I simply changed my jquery-ui.min.js to the latest version and it fixed the positioning.
我只是将我的 jquery-ui.min.js 更改为最新版本并修复了定位。
from 1.8.16 to 1.8.23 and it worked!
从 1.8.16 到 1.8.23，它奏效了！
回答by Chris
I had a similar issue, and after searching I found out I was missing a JS to fix this. In case someone stops by ensure to have a the "jquery.ui.position.js" script called as well.
我有一个类似的问题，搜索后我发现我缺少一个 JS 来解决这个问题。如果有人停下来确保也调用了“jquery.ui.position.js”脚本。
See http://jqueryui.com/demos/autocomplete/under dependencies: UI Core UI Widget UI Position
参见依赖项下的http://jqueryui.com/demos/autocomplete/：UICore UI Widget UI Position
回答by Mike
I know this is an old post, but just had this issue myself and fixed it another way.
我知道这是一个旧帖子，但我自己刚刚遇到了这个问题并以另一种方式修复了它。
I had updated jQuery, which caused the menu to appear at left:0;top:0;on the window, rather than nicely below my input.
我已经更新了 jQuery，这导致菜单出现在left:0;top:0;上window，而不是很好地低于我的输入。
Updating jQuery UI fixed it instantly. Hope this is of use to someone.
更新 jQuery UI 立即修复了它。希望这对某人有用。
回答by phildub
Simply updating to the latest JQueryUI did the trick for me. I started having this issue after I switched to Twitter Bootstrap (and the latest JQuery I think too).
简单地更新到最新的 JQueryUI 对我来说就成功了。在我切换到 Twitter Bootstrap（以及我认为也是最新的 JQuery）后，我开始遇到这个问题。
回答by Ranvir
Update Jquery UI and jQuery scripts in your project, it will resolve any conflict and issue will get fix.
更新项目中的 Jquery UI 和 jQuery 脚本，它将解决任何冲突，问题将得到修复。
回答by vinhboy
put
放
position: relative;
inside of
代替
#searchFormWrapper
回答by Stu
Another similar issue, if you're using a CDN to serve your jquery files, make sure you use a specific version, i.e.:
另一个类似的问题，如果您使用 CDN 来提供 jquery 文件，请确保使用特定版本，即：
//ajax.googleapis.com/ajax/libs/jquery/1.7.2/
Rather than the 'latest' version:
而不是“最新”版本：
//ajax.googleapis.com/ajax/libs/jquery/1/
This will take away the possibility of conflicts in future releases of jquery, which can often break an app when the 'latest' version on jquery is updated on the CDN.
这将消除 jquery 未来版本中发生冲突的可能性，当在 CDN 上更新 jquery 上的“最新”版本时，这通常会破坏应用程序。
