Как я могу использовать jQuery, чтобы создать div, абсолютно расположенный рядом с другим элементом?

Question

У меня есть окно поиска на странице, которая подключена к сценарию AJAX, который возвращает HTML на основе содержимого окна поиска через GET.

Для отображения результатов непосредственно под окном поискаМне нужно создать div в позиции относительно этого блока (положение блока зависит от разрешения экрана).Как я могу использовать jQuery для достижения этой цели?

В качестве альтернативы, можно ли использовать вместо этого автозаполнение пользовательского интерфейса jQuery, и если да, то как?У меня был bash с ним, но у меня были проблемы с его отображением в HTML.

Редактировать: Вот ссылка jsfiddle: http://jsfiddle.net/UxPb8/

Вы можетепростите за то, что вы думаете, что это работает, но как только на странице слева от поля поиска появится больше информации, позиционирование будет отменено, поэтому возникает вопрос.

Answer 1

Скажите, что ваше поле поиска находится в div, называемом 'search'.

Затем вы можете использовать функцию jQuery после , чтобы добавить ваш html:

$('#search').after(html);

Если «div», который вы хотите создать, не является частью возвращенного HTML, его довольно легко вставить:

$('#search').after("<div>" + html + "</div>");

Answer 2

Я закончил этим:

//calculate the position
var parentDiv = $(this).parents(selector);
var top = parentDiv.position().top + parentDiv.height();
var left = $("#wrapper").width()-427; //427 is a fixed offset - it's still in the right place for any screen res

//run the search
$.ajax({
    url: 'ajax/find.php',
    data: { search: $(this).val() },
    success: function(data) {
        $("#globalFindResults")
            .css({
                'position': 'absolute',
                'top': top,
                'left': left
                })
            .html(data)
            .slideDown('fast');
    }
});

Answer 3

Вот так .. (после возврата html)

$('.classNameORID').append("<div style='position:relative;'>"+ data +"</div>");