使用jquery ui 1.8 尝试自动填充
除了ui菜单不在我的输入元素下面,而是在左上角之外,一切都有效。
有没有人遇到过这个问题?
这是我的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>
这是我的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;
}
这是我的javascript:
$(document).ready(function()
{
$("#searchPhrase").autocomplete(
{
source: "/search?json",
minLength: 2
});
});
答案 0 :(得分:35)
哇噢。找到了罪魁祸首:
<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>
不要包含jquery.dimensions.js。我认为它已经在jquery-ui.js ...无论如何,它解决了我的问题。
对于最新的jqueryUI,您现在需要包含jquery.ui.position.js
答案 1 :(得分:16)
我只是将我的jquery-ui.min.js更改为最新版本并修复了定位。
从1.8.16到1.8.23并且有效!
答案 2 :(得分:12)
我有一个类似的问题,经过搜索后我发现我错过了一个JS来解决这个问题。如果有人停下来,请确保调用“jquery.ui.position.js”脚本。
请参阅依赖项下的http://jqueryui.com/demos/autocomplete/: UI核心 UI小部件 用户界面位置
答案 3 :(得分:4)
只需更新到最新的JQueryUI就可以了。 在我切换到Twitter Bootstrap(以及我认为最新的JQuery)后,我开始遇到这个问题。
答案 4 :(得分:4)
我知道这是一篇旧帖子,但我自己就是这个问题并以另一种方式解决了这个问题。
我更新了jQuery,导致菜单显示在left:0;
的{{1}} top:0;
,而不是低于我的输入。
更新jQuery UI立即修复它。希望这对某人有用。
答案 5 :(得分:3)
更新项目中的Jquery UI和jQuery脚本,它将解决任何冲突,问题将得到解决。
答案 6 :(得分:1)
把
position: relative;
里面的
#searchFormWrapper
答案 7 :(得分:0)
另一个类似的问题,如果您使用CDN来提供jquery文件,请确保使用特定版本,即:
//ajax.googleapis.com/ajax/libs/jquery/1.7.2/
而不是'最新'版本:
//ajax.googleapis.com/ajax/libs/jquery/1/
这将消除jquery未来版本中发生冲突的可能性,当jquery上的“最新”版本在CDN上更新时,这通常会破坏应用程序。