Como posso usar o jQuery para criar uma div absolutamente posicionada ao lado de outro elemento?

Question

Eu tenho uma caixa de pesquisa em uma página conectada a um script AJAX que retorna HTML com base no conteúdo da caixa de pesquisa, via GET.

Para exibir os resultados diretamente abaixo da caixa de pesquisa, preciso criar uma div em uma posição em relação a essa caixa (a posição da caixa é variável, dependendo das resoluções da tela). Como posso usar o jQuery para conseguir isso?

Como alternativa, pode ser usado o AutoComplete da UI do jQuery e, em caso afirmativo, como? Eu tive uma festa com isso, mas tive problemas para exibi -lo para exibir o HTML.

Editar: Aqui está um link jsfiddle:http://jsfiddle.net/uxpb8/

Você pode ser perdoado por pensar que funciona, mas assim que houver mais coisas na página à esquerda da caixa de pesquisa, o posicionamento é jogado fora, daí essa pergunta.

Answer 1

Acabei fazendo isso:

//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 2

Digamos que sua caixa de pesquisa esteja em uma div chamada 'Search'.

Então você pode usar o jQuery depois função para anexar seu html:

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

Se o 'div' que você deseja criar não faz parte do HTML retornado, é muito fácil inseri -lo:

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

Answer 3

Assim .. (depois de devolvido html)

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