Повторное позиционирование окна результатов автозаполнения JQuery UI

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

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

Ответы

Ответ 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/

Ответ 2

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

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

Ответ 3

Что-то вроде этого тоже будет работать

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