0

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

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

或者，是否可以使用 jQuery UI 自动完成功能，如果可以，如何使用？我确实对它很感兴趣，但根本无法让它显示 HTML。

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

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

4

3 回答 3

2

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

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

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

如果您要创建的 'div' 不是返回的 HTML 的一部分，则插入它很容易：

$('#search').after("<div>" + html + "</div>");
于 2010-10-01T12:27:25.640 回答
0

像这样..（返回html后）

$('.classNameORID').append("<div style='position:relative;'>"+ data +"</div>");
于 2010-10-01T12:28:32.160 回答
0

我最终这样做了：

//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');
    }
});
于 2010-10-06T07:01:38.503 回答