Comment puis-je utiliser jQuery pour créer une div absolument positionnée à côté d'un autre élément?

Question

J'ai une zone de recherche sur une page connectée à un script AJAX qui renvoie HTML en fonction du contenu de la zone de recherche, via GET.

Afin d'afficher les résultats directement en dessous de la zone de recherche, je dois créer une div dans une position par rapport à cette case (la position de la case est variable en fonction des résolutions d'écran). Comment puis-je utiliser jQuery pour y parvenir?

Alternativement, JQuery UI peut-il être utilisé à la place et si oui, comment? J'ai eu un bash avec mais j'ai eu du mal à l'amener à afficher le HTML.

Éditer: Voici un lien jsfiddle:http://jsfiddle.net/uxpb8/

Vous pouvez être pardonné de penser que cela fonctionne, mais dès qu'il y a plus de choses sur la page à gauche de la zone de recherche, le positionnement est rejeté, d'où cette question.

Answer 1

J'ai fini par faire ceci:

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

Dites que votre boîte de recherche est dans un div appelé «recherche».

Ensuite, vous pouvez utiliser la jQuery après Fonction pour ajouter votre HTML:

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

Si le «div» que vous souhaitez créer ne fait pas partie du HTML retourné, il est assez facile de l'insérer:

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

Answer 3

Comme ça .. (après le retour html)

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