jquery ui自动完成定位错误 [英] jquery ui autocomplete positioning wrong

问题描述

使用 jquery ui 1.8尝试自动完成

除了 ui-menu 不在我的输入元素下，而是在左上角之外，一切正常.

有人遇到过这个问题吗?

这是我的 html:

<div id="searchFormWrapper"><form method="post" name="searchForm" id="searchForm" action="/searchresults"><label for="searchPhrase" id="searchFor">搜索</label><input name="searchPhrase" id="searchPhrase" type="text"/><label for="searchScope" id="searchIn">在<select name="searchScope" id="searchScope"><option value="">所有商店</option>...</选择><input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif"alt="搜索..."/></表单><br class="clear"/>

这是我的 css:

#search{宽度:100%；保证金:0;填充:0;文字对齐:居中；高度:36px；行高:36px；背景:#666 url(/images/interface/info_bar_bg.gif) 重复-x 左上角；溢出:隐藏；字体大小:12px；}#searchFormWrapper{宽度:520px；高度:36px；溢出:隐藏；保证金:自动；填充:0;}标签#searchFor{显示:块；向左飘浮;宽度:80px；填充:0 5px 0 0;边距:0 0 0 0；文字对齐:右；}标签#searchIn{显示:块；向左飘浮;宽度:20px；填充:0 5px 0 0;边距:0 0 0 0；文字对齐:右；}#searchPhrase{显示:块；向左飘浮;宽度:120px；边距:7px 0 0 0;填充:0;}#searchScope{显示:块；向左飘浮;宽度:120px；边距:7px 0 0 0;填充:0;}#提交搜索{显示:块；向左飘浮;边距:7px 0 0 10px;填充:0;}

这是我的 javascript:

$(document).ready(function(){$("#searchPhrase").自动完成({来源:/search?json"，最小长度:2});});

解决方案

Woohoo.找到罪魁祸首:

<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

using jquery ui 1.8 trying autocomplete

Everything works apart from that the ui-menu isn't positioned under my input element, but rather in the top left corner.

Has anyone come across this problem?

Here's my 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:

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

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

解决方案

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.

For latest jqueryUI you now need to include jquery.ui.position.js

这篇关于jquery ui自动完成定位错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！