自动完成/ Fancybox

时间:2016-10-21 16:36:15

标签: jquery ajax autocomplete fancybox jquery-ui-autocomplete

我试图将AutoComplete UI集成到加载AJAX内容的FancyBox(一个ASP表单)中,并且在我的生活中不能让AutoComplete UI工作。

我在标准HTML页面上工作正常(不在FancyBox中)但由于某种原因,当我开始在指定字段中输入时,选项列表不会出现。

我不认为它是一个z索引问题,因为当我将表单作为独立页面进行尝试时,我可以在FireBug调试器中看到结果,但是当我将其作为FancyBox执行时却没有。

要执行FancyBox,我运行以下脚本:

$('.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();
    }
});});

0 个答案:

没有答案