解决：jquery.autocomplete在IE6下被下拉框遮住的问题

最近遇到一个很纠结的问题：jquery.autocomplete在IE6下被下拉框遮挡 。

如图：



网上找到原因，例如：http://www.360doc.com/content/10/1126/16/2197500_72641076.shtml

但是，我们的问题是我们用了jquery.autocomplete这个控件，这些方法对于我们就不行了。

废话多了，直接解决方法：

第一步：打开jquery.autocomplete.min.js（或者直接jquery.autocomplete.js），找到“function init()”，把这个函数下的“element=$("<div/>")”修改为“element=$("<div><iframe style='position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left: 0; scrolling: no;' frameborder='0' src='about:blank'></iframe></div>")”。

第二步：打开“jquery.autocomplete.css”，在“.ac_results”加一句“height:335px;”，就是设置高度，这个随便你设置。

刷新，如下图：




至此，问题解决。

大小: 58.6 KB

大小: 62.1 KB
查看图片附件

搜索下jquery bgiframe

elementstorm 写道
搜索下jquery bgiframe

这个是不错，不过我们既然已经用了jquery.autocomplete，迁移插件工作量太大了。

为什么不去设置一下 层高呢

设置层高没用，IE下的windowed control很可怕，我向来是图省事把select都visibility:hidden了

怎么这么多AD者!

挺好啊!!!!!!!!!!!!!!!

可以这样修改！
在jquery.autocompelete.js的init()方法中将页面上所有下拉框都隐藏，然后等数据加载完之后再result()方法下将所有的下拉框都显示出来
//隐藏的代码
        function init() {
                    //hide all select
                    $("select").each(function(){$(this).hide();});

                if (!needsInit)
                        return;
                element = $("<div/>")
                .hide()
                .addClass(options.resultsClass)
                .css("position", "absolute")
                .appendTo(document.body);
       
                list = $("<ul/>").appendTo(element).mouseover( function(event) {
                        if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
                    active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
                            $(target(event)).addClass(CLASSES.ACTIVE);            
                }
                }).click(function(event) {
                        $(target(event)).addClass(CLASSES.ACTIVE);
                        select();
                        // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
                        input.focus();
                        return false;
                }).mousedown(function() {
                        config.mouseDownOnSelect = true;
                }).mouseup(function() {
                        config.mouseDownOnSelect = false;
                });
               
                if( options.width > 0 )
                        element.css("width", options.width);
                       
                needsInit = false;
        }

显示出来的代码
$("#idname").autocomplete("${ctx}/main/car/car-tran!autoLoadName.action",options).result(function(event,item){
                        //客户编号
                        $("#memberid").val(item.id);
                        //证件类型
                        var cerType=item.certificationType;
                        $("#certitype option").each(function(){
                            $(this).attr("selected",($(this).val()==cerType));
                        });
                        //证件号码
                        $("#idcardnum").val(item.mrCid);
                        //客户头像
                    var img=item.mrImg;
                    if("null"==img){$("#userimg").attr("src", "/images/unknown.jpg");}
                    $("#userimg").attr("src", "/img/"+img);
                    //客户级别
                        var mrLevel=item.mrLevel;
                    if(mrLevel==1){
                                mrLevel="普通";
                    }else if(mrLevel==2){
                                mrLevel="会员";
                    }else if(mrLevel==3){
                                mrLevel="VIP会员";
                    }else if(mrLevel==4){
                                mrLevel="黑名单";
                    }else{
                                mrLevel="暂无";
                    }
                    //设置客户级别信息
                    $("#userlevel").text(mrLevel);
                    //设置治安记录
                    setAlarmText(item.mrCid);
                    //设置平台客户
                    setPlamform(item.mrCid);
                    $("select").each(function(){$(this).show();});
            });
        });


Power by http://www.8484la.com