如何使用 jQuery 创建一个绝对位于另一个元素旁边的 div？

Question

我的页面上有一个搜索框，它连接到一个 AJAX 脚本，该脚本通过 GET 根据搜索框的内容返回 HTML。

为了在搜索框正下方显示结果，我需要在相对于该框的位置创建一个 div（该框的位置根据屏幕分辨率而变化）。我如何使用 jQuery 来实现这一目标？

或者，可以使用 jQuery UI 自动完成来代替吗？如果可以，怎么做？我确实对它很满意，但根本无法让它显示 HTML。

编辑： 这是一个 jsfiddle 链接： http://jsfiddle.net/UxPb8/

你认为它有效是可以原谅的，但一旦有更多页面上搜索框左侧的内容，定位被抛弃，因此出现这个问题。

Answer 1

假设您的搜索框位于名为“搜索”的 div 中。

然后你可以使用 jQuery after 函数来附加你的html：

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

如果你想创建'div'不是返回的 HTML 的一部分，插入它非常容易：

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

Answer 2

像这样..（返回html后）

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

Answer 3

我最终这样做了：

//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');
    }
});