jQuery ui自动完成IE 11问题

时间:2016-03-22 10:46:25

标签: javascript css jquery-ui-autocomplete

当我在自动完成源函数中返回大的结果集时,结果不会出现在IE中。使用chrome和Firefox一切正常。

IE控制台不会显示任何错误或警告,当我调试代码时,结果变量包含所有值。

我尝试对结果集进行切片并设置超时值,但没有运气。

这是我的自动完成功能:

 $( "#" + autoCompleteEle ).autocomplete({
    minLength: 2,
    autoFocus: true,
    delay: 1000,
    maxResults: 100,
    timeout: 60000,
    source: function( request, response ) {
        var res = [];
        var resStr  = "";
        var cn = "";
        var owner = "";
        var nrfLocalizedDescrs = "";
        var noResultsLabel = "No Results";

        var roleObj = {};
        var term = request.term.toLowerCase();
        if(term.substr(0,1).indexOf("*") == -1){
            var spinnElement = $("#" + autoCompleteEle ).parent();
            //spinnElement.wrap("<div id='spinnWrappper'></div>");
            initSpinner( spinnElement, "20%", "35%" );

            setTimeout(function () {
                var queryRes = null;
                queryRes = queryRoles(term, clientValue);
                var selRowId = $("#roleGrid").jqGrid("getGridParam", "selrow");
                var system = $("#" + selRowId + "_system").val();
                var roleGrid = $("#roleGrid").jqGrid("getGridParam", "data");
                var roleDnArray = $.map(roleGrid, function (item) { 
                    if( (typeof(item.roleDn) != "undefined") && (typeof(item.system) != "undefined") && item.system.toLowerCase() == system.toLowerCase() ){
                        return item.roleDn.toLowerCase();
                    }   
                });

                for(key in queryRes){
                    if( roleDnArray.indexOf(key.toLowerCase() ) == -1){
                        if (queryRes.hasOwnProperty(key)) {
                            roleObj = queryRes[key];
                            if(typeof(roleObj.map.attr.map.CN) != "undefined"){
                                cn = roleObj.map.attr.map.CN.list[0];
                            }
                            if(typeof(roleObj.map.attr.map.Owner) != "undefined"){
                                owner = roleObj.map.attr.map.Owner.list[0];
                            }
                            if(typeof(roleObj.map.attr.map.nrfLocalizedDescrs) != "undefined"){
                                var roleDescStr = roleObj.map.attr.map.nrfLocalizedDescrs.list[0];
                                if(roleDescStr.indexOf("|") > -1){
                                    var descPattern1 = roleDescStr.indexOf("~") + 1;
                                    var descPattern2 = roleDescStr.indexOf("|");
                                    nrfLocalizedDescrs = roleDescStr.substring(descPattern1, descPattern2);

                                }else{
                                    var descPattern1 = roleDescStr.indexOf("~") + 1;
                                    var descPattern2 = roleDescStr.length -1;
                                    nrfLocalizedDescrs = roleDescStr.substr(descPattern1, descPattern2);
                                }
                            }

                            var labelStr = cn;
                            var nameStr = key;
                            res.push({label: labelStr, name: nameStr, description: nrfLocalizedDescrs, owner: owner });
                            //cache.push(userObj);
                        }
                    }
                }
                if (!res.length) {
                    res = [noResultsLabel];
                }   
                res = sortByKey(res, 'label');
                $(".spinner").remove();
                response(res.slice(0, 100));
             }, 0); 
        }else{

        }
    },
    select: function(e, ui) {
        if (ui.item.label === "No Results") {
            event.preventDefault();
        }else{
            var rowId;
            $(this).prop('title', ui.item.name);
            $(this).val(ui.item.label);
            //set roleDn and description
            rowId = $(this).parent('td').parent('tr').prop('id');
            if( ui.item.description != "" &&  ui.item.description != null){
                $('#roleGrid').jqGrid('setCell', rowId, 'roleDescription', ui.item.description);
            }
            $('#roleGrid').jqGrid('setCell', rowId, 'roleDn', ui.item.name);
            $('#roleGrid').jqGrid('setCell', rowId, 'roleStatus', 'new');
            if(ui.item.owner != "" && ui.item.owner != null){
                $('#roleGrid').jqGrid('setCell', rowId, 'ownerDn', ui.item.owner);
                setRoleOwnerTooltip( rowId, ui.item.owner, false );
            }
        }
    },
    search: function(event, ui) { 
        //$('.spinner').show();
    },
    response: function(event, ui) {
       //$('.spinner').hide();
    },
    create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li data-toggle="tooltip" data-container="body">')
                    .append('<a>' + '<i class="fa fa-list-alt autocompleteItem"></i>' + item.label +'</a>')
                    .appendTo(ul)
                    .tooltip({title: item.description,  placement : 'right'});
            };
    },
    focus: function (event, ui) {
        if (ui.item.label === "No Results") {
            event.preventDefault();
        }else{

        }
    }
}); 

的CSS:

    .ui-autocomplete {
       position: absolute;
       top: 100%;
       left: 0;
       z-index: 1000;
       float: left;
       display: none;
       min-width: 200px;
       max-width: 900px;
       max-height: 500px;
       overflow-y: auto;
       overflow-x: hidden;
      _width: 500px;
       padding: 4px 0;
       list-style: none;
       background-color: #ffffff;
       border-color: #999999;
       border-style: solid;
       border-width: 1px;
      -moz-border-radius-topright: 5px;
     -webkit-border-top-right-radius: 5px;
      border-top-right-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
       border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
     -webkit-border-bottom-left-radius: 5px;
      border-bottom-left-radius: 5px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
  }

版本:

  • IE11
  • jQuery 1.10.2
  • jQuery-ui 1.10.4

0 个答案:

没有答案