如何让jQueryUI（自动完成）和fancybox很好地发挥作用

我在

fancybox

中遇到了自动完成问题

问题源于

fancybox

覆盖了包含结果的

div

框。自动完成工作正常，但结果返回到

fancybox

我怎样才能解决这个问题

$('#calendar-wrapper').on('click','#calendar td[data-day]',function(){
            $.fancybox({href: '#newapp', title : 'New appointment'  });
            $("#newapp input[name='app_time']").val($(this).closest('tr').attr('data-hr')+':00:00');
            $("#newapp input[name='app_date']").val($(this).attr('data-day'));
        });////END OF FANCYBOX TRIGGER
     var cache = {};
    $(".ac").on('keyup.autocomplete', function(){
        var fun = $(this).attr("data-ac");
        var par=$(this).closest('FIELDSET');
        var el=$(this);
        par.find('input').not(this).val('');
        par.find('select option:selected').removeAttr('selected');
        $(this).autocomplete({
            minLength: 2,
            source: function( request, response ) {
                var term = request.term,baseurl='<?=base_url()?>';
                if ( term in cache ) {
                response( cache[ term ] );
                return;
                }
                var url=baseurl+'ajax/ac/'+fun+'/'+encodeURIComponent(term);
                $.getJSON( url, '', function( data, status, xhr ) {
                cache[ term ] = data;
                response( data );
                }).complete(function() {$('.ui-autocomplete-loading').removeClass('ui-autocomplete-loading'););
            },
            select: function(event, ui){
                for (var key in ui.item) 
                {
                var obj = ui.item[key];
                var f=par.find('[name*="'+key+'"]').first();
                if(f.length){
                    if(f.tagName == 'select'){
                        f.find('option[value="'+obj+'"]').first().attr('selected','selected');
                    }else{
                        f.val(obj);
                    }
                }
                }
            },
            messages: {noResults: '',results: function() {}}
        }); 
    });////END OF AUTOCOMPLETE

$（“#日历包装器”）。在（'click'，“#calendar td[data day]”上，函数（）{
$.fancybox（{href:'#newapp'，标题：'新约会'}）；
$（“#newapp input[name='app_time']）.val（$（this）.closest（'tr'）.attr（'data-hr'）+'：00:00'）；
$（“#newapp input[name='app_date']）.val（$（this.attr（'data-day'））；
});////FANCYBOX触发器结束
var cache={}；
$（“.ac”）.on（'keyup.autocomplete'，function（）{
var fun=$（this.attr（“数据ac”）；
var par=$（this.nexist（'FIELDSET'）；
var el=$（本）；
找到（“输入”）。不（这个）。瓦尔（′）；
查找（“选择选项：选择”）.ReaveFATC（“选择”）；
$（此）。自动完成({
最小长度：2，
来源：功能（请求、响应）{
var term=request.term，baseurl=''；
if（缓存中的术语）{
响应（缓存[术语]）；
返回；
}
var url=baseurl+'ajax/ac/'+fun+'/'+encodeURIComponent（术语）；
$.getJSON（url'，函数（数据，状态，xhr）{
缓存[术语]=数据；
答复（数据）；
}).complete（function（）{$（'.ui autocomplete-load'）.removeClass（'ui-autocomplete-load'）；）；
},
选择：功能（事件、用户界面）{
for（ui.item中的变量键）
{
var obj=ui.item[键]；
var f=par.find（'[name*=“'+key+'“]'）.first（）；
如果（f.长度）{
如果（f.tagName==“选择”）{
f、 查找（'option[value=“”+obj+'“]'））.first（）.attr（'selected'，'selected'）；
}否则{
f、 val（obj）；
}
}
}
},
消息：{noResults:''，结果：function（）{}
}); 
})；///自动完成的结束

---

如何更改包含

jquery ui ac

结果的

div

的z索引，以在

fancybox

上方显示它们？

我使用了它，它对我很有用

<style>
     .ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content.ui-corner-all {
         z-index: 10000 !important;
     }
</style>

.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content.ui-corner-all{
z指数：10000！重要；
}

我也面临同样的问题

试一试

---

这足以解决问题（使用fancybox 2.1.5、jquery ui 1.11.4进行测试）：

加

自动完成

$("#pagelink").autocomplete({
        'source':'includes/loadvals-sql-ajax.php?table=Categories',
        'minLength': 3,
        'create': function(){$(".ui-autocomplete").css("z-index",100000);}
        });

---

你试过覆盖autocomplete的z-index吗？.ui-front{z-index:10000；}yp的jquery覆盖ittry

.css（）

像

$（这个）。autocomplete（…）.css（'z-index'，10000）

也不起作用：（对我也有效。谢谢！

.ui-autocomplete {
    z-index: 10000 !important;
}

'create': function(){$(".ui-autocomplete").css("z-index",100000);}

$("#pagelink").autocomplete({
        'source':'includes/loadvals-sql-ajax.php?table=Categories',
        'minLength': 3,
        'create': function(){$(".ui-autocomplete").css("z-index",100000);}
        });