web-dev-qa-db-ja.com

jQuery UIのオートコンプリートの位置を変更-下ではなくポップアップ

ページの下部にオートコンプリートボックスを配置していますが、結果をテキストボックスの上ではなく下にポップアップ表示したいのですが。これどうやってするの？

jqueryjquery-uiautocomplete
25
Chris

私は自分の質問にすでに答えることができたようです。誰かがそれを手に入れたら、私はより良い解決策を受け入れます。これをオートコンプリートの起動に追加しました。基本的に、ボックスを開いたときに新しいオフセットに再配置します。

open: function(event, ui) {
    var autocomplete = $(".ui-autocomplete");
    var oldTop = autocomplete.offset().top;
    var newTop = oldTop - autocomplete.height() - $("#quick_add").height() - 10;

    autocomplete.css("top", newTop);
}
9
Chris

@mvonlintelの答えを別の言い方で言えば、ウィジェット宣言で提案メニューの位置を設定します。

$('selector').autocomplete(
{
    position: { my: "left bottom", at: "left top", collision: "flip" },
    .
    .
});
32
mohitp

JQuery UI Position utility を使用できます。次に例を示します。

$(".ui-autocomplete").position({
    my: "left bottom",
    at: "left top",
    of: $("#quick_add"),
    collision: "flip flip"
});
17
mvonlintel

jQuery UIの現在のバージョンでは、オートコンプリートウィジェットに、上記の位置ウィジェットと同じプロパティを持つオプション付きの位置オブジェクトを与えることができます。これを使用して、必要に応じて提案リストを配置できます。

5
Tsahi Asher