在花式框中打开自动完成的结果

>我有以下自动完成搜索框代码

$("#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);   

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

这是我想调用的花哨框代码。

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

我到处寻找可能的解决方案，但我无法弄清楚。你能帮忙吗！

谢谢