Select2 3.5.2 mousedown在IE10 & IE11中跳转到列表顶部

Question

使用Select2 v3.5.2 创建动态选项列表。输入允许用户从列表中 select，键入以搜索选项，如果选项不存在，则创建它。创建此数据的函数在 angular 控制器中调用。（ui-select 未用于此特定输入，因为在实施时我没有看到如何实施搜索 + 自定义输入）

var dataQuant = {results: []};
for (var key in response.defaultQuantities) {
    var objQuant = response.defaultQuantities[key];         
    dataQuant.results.push({id:key, text:key + 'otherText'});
}


$('.customClass').select2({
    createSearchChoice:function(term, data) {                 
        if ($(data).filter(function() {return this.text.localeCompare(term)===0; }).length===0) {
            return {id:term, text:term};
        }
    },
    matcher: function(term, text) {
        return text.toUpperCase().indexOf(term.toUpperCase())==0;
    },
    data: dataQuant,
    dropdownCssClass: "customClass2",
    selectOnBlur: true,
    initSelection : function (element, callback) {
        var data = {id: response.defaultQuantity , text: response.defaultQuantity};
        callback(data);
    }
});

$('.customClass').on('change',function(){
    var newQuantityData = $('.customClass').select2('data');
    if ($scope.formData["quantity"] != newQuantityData.id){             
        $scope.formData["quantity"] = newQuantityData.id;
        $scope.updateFunction();  
    }
});

这在 chrome/firefox/opera/safari 和 IE9 及以下版本中工作得很好。在 IE10 和 11 中，最初看到的任何选项都可以单击并正常工作。选项列表中最初隐藏的任何选项（用户必须滚动到）mousedown 跳回到选项列表的顶部。如果按住鼠标，然后在松开鼠标时向下滚动选项，则正确的选项是 selected.

经过一番搜索，我发现在 select.js 下 // single postprocessResults: function (data, initial, noHighlightUpdate) { 罪魁祸首是

if (initial === true && selected >= 0) {
    this.highlight(selected);
} else {
    this.highlight(0);
}

所有其他浏览器都将 'initial' 值作为 true 传递给函数。 IE10/11 传递了一个对象，该对象在 if 语句中失败，导致第一个选项被突出显示。我不确定为什么要传入一个对象而不是 true/false ，这似乎是它所期望的。对 Select2 有更多了解的人可以权衡一下吗？

编辑：

删除 this.highlight(0) 后，我现在发现以前不存在的自定义输入未被 select 编辑，因此单击回车键不会 select 它们。现在我只是要添加一个条件来在 IE 中忽略此行。

Answer 1

使用和似乎在所有浏览器中都能正常运行。

改变

if (initial === true && selected >= 0) {
    this.highlight(selected);
} else {
    this.highlight(0);
}

至

if (initial === true && selected >= 0) {
    this.highlight(selected);
} else {
    var docMode = document.documentMode,
    hasDocumentMode = (docMode !== undefined), 
    isIE10 = (docMode === 10),
    isIE11 = (docMode === 11);

    if(hasDocumentMode && (isIE11 || isIE10)){                       
        if(initial.target.value == data.results[0].id || data.results.length == 1){
            this.highlight(0);
        }
    }else{
        this.highlight(0);                           
    }
}

选项列表在 IE 10/11 中不再跳转到顶部，但仍允许用户输入自定义值，并且 'enter' 键选择键入的值。

Answer 2

我用以下方法解决了这个问题：

var scrollTop;
$('#mySelect2').on("select2:selecting", function( event ){
    var $pr = $( '#'+event.params.args.data._resultId ).parent();
    scrollTop = $pr.prop('scrollTop');
});
$('#mySelect2').on("select2:select", function( event ){
    var $pr = $( '#'+event.params.data._resultId ).parent();
    $pr.prop('scrollTop', scrollTop );
});

也许这不是最优雅的解决方案，但本质上我们会监听选择事件，然后获取可选选项面板的当前 scrollTop。在实际选择中，我们将面板的 scrollTop 重置回其原始状态。这种情况发生得如此之快，以至于您应该看不到控件 window 中的任何跳转。仅使用 Select2 v. 4.x.

进行测试

此解决方案的优点在于您无需修改组件或在配置函数中包含任何内容。

Select2 3.5.2 mousedown在IE10 & IE11中跳转到列表顶部

Select2 3.5.2 mousedown jumps to top of list in IE10 & IE11

javascript

internet-explorer-10

jquery-select2

internet-explorer-11