Question

我有以下自动填充搜索框代码

$("#searchbox").autocomplete({
            source: function(request,response) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    url: "/Settings/Find?searchString="+request.term,
                    success: function(data) {
                        response($.map(data,function(item) {
                            return { label: item.Name ,value:  item.Type, ID: item.ID};
                        }

                        ))
                                    }
                })
            },
            messages: {
                noResults: "No Results",results: "Results"
            },
        select: function(e, ui) {
         window.location.assign('/Item/Details/'+ui.item.ID);                 
       }
          },   


    });

当用户点击自动完成的项目时，我会使用此

将它们重定向到项目的详细信息页面

window.location.assign('/Item/Details/'+item.ID);

现在，我想在fancybox中显示项目的详细信息，而不将用户重定向到另一个页面。因此，当用户点击自动完成的结果时，会打开一个fancybox，其中包含所选项目的详细信息。

这是我想要调用的fancybox代码。

$('.fancyboxdisplay').fancybox({
                fitToView: false,                
                autoSize: false,
                closeClick: false,
                width: '550px',
                height:'680px',             
                padding: 15,                 
                closeBtn:true,
                'afterClose': function() {
                    window.location.reload();
                },

            });

我到处寻找可能的解决方案，但我无法弄明白。你能帮忙吗？

谢谢

Answer 1

在select设置中，尝试使用fancybox脚本替换window.location.assign，如：

select: function (e, ui) {
    // window.location.assign('/Item/Details/' + ui.item.ID);
    $.fancybox({
        href: '/Item/Details/' + ui.item.ID,
        type: "iframe",
        fitToView: false,
        autoSize: false,
        closeClick: false,
        width: 550,
        height: 680,
        padding: 15,
        closeBtn: true,
        afterClose: function () {
            window.location.reload();
        }
    });
}

假设您之前已加载了fancybox js和css文件

在Fancybox中打开自动完成的结果

1 个答案: