Question

使用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
    });
});

Answer 1

哇噢。找到了罪魁祸首：

<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

Answer 2

我只是将我的jquery-ui.min.js更改为最新版本并修复了定位。

从1.8.16到1.8.23并且有效！

Answer 3

我有一个类似的问题，经过搜索后我发现我错过了一个JS来解决这个问题。如果有人停下来，请确保调用“jquery.ui.position.js”脚本。

请参阅依赖项下的http://jqueryui.com/demos/autocomplete/： UI核心 UI小部件用户界面位置

Answer 4

只需更新到最新的JQueryUI就可以了。在我切换到Twitter Bootstrap（以及我认为最新的JQuery）后，我开始遇到这个问题。

Answer 5

我知道这是一篇旧帖子，但我自己就是这个问题并以另一种方式解决了这个问题。

我更新了jQuery，导致菜单显示在left:0;的{{1}} top:0;，而不是低于我的输入。

更新jQuery UI立即修复它。希望这对某人有用。

Answer 6

更新项目中的Jquery UI和jQuery脚本，它将解决任何冲突，问题将得到解决。

Answer 7

把

position: relative;

里面的

#searchFormWrapper

Answer 8

另一个类似的问题，如果您使用CDN来提供jquery文件，请确保使用特定版本，即：

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

而不是'最新'版本：

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

这将消除jquery未来版本中发生冲突的可能性，当jquery上的“最新”版本在CDN上更新时，这通常会破坏应用程序。

jquery ui autocomplete定位错误

8 个答案: