web-dev-qa-db-ja.com

jquery uiオートコンプリートの配置が間違っている

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
    });
});
javascriptcssjquery-uiautocomplete
29
autonomatt

ウーフー。犯人を見つけた：

<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を含める必要があります

35
autonomatt

私は単にjquery-ui.min.jsを最新バージョンに変更し、位置を修正しました。

1.8.16から1.8.23に変更されました。

16
Todd

同様の問題があり、検索したところ、これを修正するためのJSがないことがわかりました。誰かが "jquery.ui.position.js"スクリプトも呼び出されるようにした場合。

依存関係の下で http://jqueryui.com/demos/autocomplete/ を参照してください：UI Core UI Widget UI Position

12
Chris

最新のJQueryUIに更新するだけでうまくいきました。 Twitterに切り替えた後、私はこの問題を抱え始めましたBootstrap（そして私が考える最新のJQueryも））。

4
phildub

私はこれが古い投稿であることを知っていますが、この問題を自分で解決し、別の方法で修正しました。

私はjQueryを更新していたため、メニューがwindowのleft:0;top:0;に表示され、入力の下には表示されませんでした。

JQuery UIを更新するとすぐに修正されました。これが誰かに役立つことを願っています。

4
Mike

プロジェクトのjquery UIとjQueryスクリプトを更新すると、競合が解決され、問題が修正されます。

3
Ranvir

置く

position: relative;

の中に

#searchFormWrapper
1
vinhboy

CDNを使用してjqueryファイルを提供している場合、別の同様の問題、特定のバージョンを使用していることを確認してください。

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

「最新」バージョンではなく：

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

これにより、jqueryの将来のリリースで競合が発生する可能性がなくなります。これは、jqueryの「最新」バージョンがCDNで更新されたときにアプリを破壊することがよくあります。

0
Stu