web-dev-qa-db-ja.com

jquery UIオートコンプリート結果ボックスの再配置

私は単純な検索用語提案ツールにJquery UI Autocompleteプラグインを使用しています。結果ボックスを移動できないことを除いて、問題なく稼働しています。基本的に、左に20ピクセル、下に4ピクセル移動する必要があります。 Jquery UI CSSを上書きしようとしましたが、ボックスを再配置できませんでした。

この問題を経験した人からの助けがあれば大歓迎です。

jquerycssjquery-uijquery-pluginsautocomplete
23
JP1971

openイベントをタップして、そのイベントが発生したときにメニューの位置を変更する方法の1つを次に示します。

$("#autocomplete").autocomplete({
    appendTo: "#results",
    open: function() {
        var position = $("#results").position(),
            left = position.left, top = position.top;

        $("#results > ul").css({left: left + 20 + "px",
                                top: top + 4 + "px" });

    }
});

メニューを含むappendToを簡単に見つけるためにulオプションも使用しています。ただし、このオプションがなくても実行できます。

これが実際の例です： http://jsfiddle.net/9QmPr/

25
Andrew Whitaker

これは positionオプション 、具体的には offset property を使用して簡単に実現できます。

$('#myField').autocomplete({
    source: …,
    position: {
        offset: '20 4' // Shift 20px to the left, 4px down.
    }
});
21
jensgram

このようなものもうまくいくでしょう

open : function(){
        $(".ui-autocomplete:visible").css({top:"+=5",left:"-=2"});
    },
17
goksel

このオプションを使用する方が良いようです

appendTo: "#autocomplete_target_wrapper",
menudocking: {
    menucorner: "right top",
    inputcorner: "right bottom",
    collision: "none"
}

公式リンク https://forum.jquery.com/topic/autocomplete-menu-docking-position

1
Savickii Stanislav