Изменение положения окна результатов автозаполнения пользовательского интерфейса Jquery

Question

Я использую плагин автозаполнения пользовательского интерфейса Jquery для инструмента прямого поиска поисковых запросов. Он работает без проблем, за исключением того, что я не могу переместить окно результатов. Мне в основном нужно переместить его на 20 пикселей влево и на 4 пикселя вниз. Я попытался перезаписать CSS JQuery UI, но не смог изменить положение окна.

Любая помощь от кого-то, кто сталкивался с этой проблемой, будет принята с благодарностью.

Answer 1

Вот один из способов сделать это, нажав на событие open и изменив положение меню, когда это событие произойдет:

$("#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/

Answer 2

Этого легко достичь с помощью опции position , в частности свойства offset :

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

Answer 3

Примерно так тоже будет работать

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

Answer 4

Кажется, лучше использовать эту опцию

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

Официальная ссылка https://forum.jquery.com/topic/autocomplete-menu-docking-position