自动完成/ Fancybox

Question

I'm trying to integrate the AutoComplete UI into a FancyBox loading AJAX content (An ASP form), and cannot for the life of me get the AutoComplete UI working.

I have it working fine on standard HTML pages (not in FancyBox) but for some reason when I start typing in the designated field, the list of options does not appear.

I don't think its a z-index issue as when I try the form as a standalone page I can see the results in the FireBug debugger but not when I execute it as a FancyBox.

To execute the FancyBox I run this script:

$('.add').on('click', function(){
$.fancybox.open({
    href: "/form.asp",
    type: "ajax",
    helpers : { 
        overlay: {
            css: { 'background': 'rgba(255, 255, 255, 0.5)' }
        }
    },
    afterShow : function() {
        var url = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js";
        $.getScript( url, function() {
            $( "#name" ).autocomplete({
                source: function( request, response ) {
                    $.ajax({
                        url: "/list.asp",
                        type: "post",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function( data ) {
                            response( data );
                        }
                    });
                },
                appendTo: "#search",
                open: function() {
                    var position = $("#search").position(),
                        left = position.left, top = position.top;

                    $(".autocomplete-container > ul").css({left: (left + 20) + "px",
                                            top: (top + 4) + "px" });

                },
                minLength: 2
            });
        }); 
    },
    afterClose : function(){
        location.reload();
    }
});});