كيف يمكنني استخدام jQuery لإنشاء Div في وضعه على الإطلاق بجوار عنصر آخر؟

Question

لدي مربع بحث على صفحة مدمن على برنامج Ajax يقوم بإرجاع HTML استنادًا إلى محتويات مربع البحث ، عبر GET.

لعرض النتائج مباشرة أسفل مربع البحث ، أحتاج إلى إنشاء div في موضع بالنسبة إلى هذا المربع (موضع المربع متغير اعتمادًا على قرارات الشاشة). كيف يمكنني استخدام jQuery لتحقيق ذلك؟

بدلاً من ذلك ، هل يمكن استخدام jQuery UI الإكمال التلقائي بدلاً من ذلك ، وإذا كان الأمر كذلك ، كيف؟ لقد تعرضت لضرب معها ولكن واجهت مشكلة في الحصول عليها لعرض HTML على الإطلاق.

يحرر: هنا رابط JSfiddle:http://jsfiddle.net/uxpb8/

يمكنك أن تسامح على التفكير في أنه يعمل ، ولكن بمجرد وجود المزيد من الأشياء على الصفحة على يسار مربع البحث ، يتم إلقاء موقع ، وبالتالي هذا السؤال.

Answer 1

انتهى بي الأمر القيام بذلك:

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

قل أن مربع البحث الخاص بك في Div يسمى "البحث".

ثم يمكنك استخدام jQuery بعد، بعدما وظيفة لإلحاق HTML الخاص بك:

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

إذا لم يكن "Div" الذي تريد إنشائه جزءًا من HTML الذي تم إرجاعه ، فمن السهل جدًا إدخاله:

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

Answer 3

مثل هذا .. (بعد إرجاع HTML)

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