jQuery用户界面自动完成定位错误 [英] jquery ui autocomplete positioning wrong

问题描述

使用jQuery UI的1.8

试图自动完成

一切正常，除了使UI菜单是不是我输入的元素定位，而是在左上角。

有没有人碰到这个问题？

下面是我的html：

 ＆LT; D​​IV ID =搜索＆GT;
    ＆LT; D​​IV ID =searchFormWrapper＆GT;
        ＆LT;形式方法=邮报NAME =searchFormID =searchForm行动=/ SearchResult所＆GT;
        ＆LT;标签=searchPhraseID =searchFor＆GT;
            搜索＆LT; /标签＆gt;
        ＆LT;输入名称=searchPhraseID =searchPhrase类型=文本/＆GT;
        ＆LT;标签=SearchScope的ID =Searchin的＆GT;
            上述＆lt; /标签＆gt;
        ＆LT;选择名称=SearchScope的ID =SearchScope的＆GT;
            ＆LT;期权价值=＆GT;所有的商店和LT; /选项＆GT;
            ...
        ＆LT; /选择＆GT;
        ＆LT;输入类型=形象NAME =submitSearchID =submitSearchSRC =/图像/按钮/ search.gif
            ALT =搜索.../＆GT;
        ＆LT; /表及GT;
        ＆LT; BR类=清除/＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

和这里是我的CSS：

 ＃搜寻
{
 宽度：100％;
 保证金：0;
 填充：0;
 文本对齐：中心;
 高度：36px;
 行高：36px;
 背景：＃666网址（/images/interface/info_bar_bg.gif）重复-X左上角;
 溢出：隐藏;
 字体大小：12像素;
}
#searchFormWrapper
{
 宽度：520px;
 高度：36px;
 溢出：隐藏;
 保证金：汽车;
 填充：0;
}
标签＃searchFor
{
 显示：块;
 浮动：左;
 宽度：80px;
 填充：0为5px 0 0;
 保证金：0 0 0 0;
 文本对齐：权利;
}
标签＃Searchin的
{
 显示：块;
 浮动：左;
 宽度：20像素;
 填充：0为5px 0 0;
 保证金：0 0 0 0;
 文本对齐：权利;
}
#searchPhrase
{
 显示：块;
 浮动：左;
 宽度：120像素;
 保证金：7px的0 0 0;
 填充：0;
}
#searchScope
{
 显示：块;
 浮动：左;
 宽度：120像素;
 保证金：7px的0 0 0;
 填充：0;
}
#submitSearch
{
 显示：块;
 浮动：左;
 保证金：7px的0 0 10px的;
 填充：0;
}
 

和这里是我的javascript：

  $（文件）。就绪（函数（）
{
    $（＃searchPhrase）。自动完成（
    {
        来源：？/搜索JSON
        的minLength：2
    }）;
}）;
 

解决方案

呜呼。找到罪魁祸首：

 ＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jQuery的/ 132 / jQuery的-1.4.2.min.js＆GT;＆LT; / SCRIPT＆GT;
            ＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jQuery的/ 132 / jQuery的-UI-1.8.custom.min.js＆GT;＆LT; / SCRIPT＆GT;
            ＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jQuery的/ 100325 / jquery.dimensions.js＆GT;＆LT; / SCRIPT＆GT;
            ＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jQuery的/ 100325 / jquery.tooltip.js＆GT;＆LT; / SCRIPT＆GT;
 

不包括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用户界面自动完成定位错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！