Question

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

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

或者，可以使用jQuery UI Autocomplete，如果是，如何使用？我确实有一个bash，但很难让它显示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');
    }
});

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

3 个答案: