jquery ui自动完成定位错误

Posted 2023-02-22

【中文标题】jquery ui自动完成定位错误

【英文标题】：jquery ui autocomplete positioning wrong

【发布时间】：2011-02-03 08:24:13

【问题描述】：

使用 jquery ui 1.8 尝试自动完成

除了 ui-menu 不在我的输入元素下方，而是在左上角之外，其他一切都有效。

有人遇到过这个问题吗？

这是我的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"
             />
        </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
    );
);

【问题讨论】：

您确定要包含 jQuery UI CSS 文件吗？

是的。检查了。 ui-menu 列表的格式都正确。只是位置不对...

您有要查看的版本的链接吗？我建议删除除自动完成的 CSS 之外的所有 CSS，以检查它是否有任何其他规则冲突。

好的，完成了（删除了所有其他 CSS），它仍然显示在左上角，而不是附加到输入元素......嗯......我猜这是向前迈出的一步...... .

【参考方案1】：

放

position: relative;

里面

#searchFormWrapper

【参考方案2】：

哇哦。找到罪魁祸首：

<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

【讨论】：

哦，伙计，我的项目恰恰相反——我不得不删除旧的 jquery.dimensions.pack.js，因为“dimensions”现在是 jQuery.UI 的一部分。感谢您的贡献！

难以置信！在我找到这篇文章之前，我打算开始拆开我的 CSS！干杯！

这个提醒我，我的jQuery 1.8.0.min 和UI 1.8.10 不匹配。指向正确的 UI 版本 (1.8.23) 解决了问题。

【参考方案3】：

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

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

【讨论】：

这对我有用。我没有包含 dimensions.js，但我仍然看到放错位置的自动完成。一旦我添加了 position.js，它就按预期工作了。

【参考方案4】：

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

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

而不是“最新”版本：

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

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

【参考方案5】：

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

【参考方案6】：

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

从 1.8.16 到 1.8.23，它成功了！

【讨论】：

我使用的是 jquery-ui 1.8.18 并升级到 1.8.23，它解决了我的问题。

更新到 v.1.9.2 破坏了我的代码。从 1.8.17 更新到 1.8.23 解决了我的问题。旧版本可以在 jQuery UI github 上找到：github.com/jquery/jquery-ui/releases

谢谢！像魅力一样工作:)

【参考方案7】：

我知道这是一篇旧帖子，但我自己也遇到了这个问题并以另一种方式修复了它。

我更新了 jQuery，这导致菜单出现在 window 上的 left:0; top:0;，而不是在我的输入下方。

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

【讨论】：

你刚刚成就了我的夜晚！谢谢！

【参考方案8】：

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