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

Question

使用 Select2 v3.5.2 创建动态选项列表。输入允许用户从列表中选择，键入以搜索选项，如果选项不存在，则创建它。创建此数据的函数在 Angular Controller 中调用。 (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 跳回到选项列表的顶部。如果按住鼠标，然后在松开鼠标时向下滚动选项，则选择了正确的选项。

经过一些搜索，我发现在 select.js 下 //单个 postprocessResults: 函数(数据、初始、noHighlightUpdate){ 罪魁祸首是

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

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

编辑:

删除this.highlight(0)后我发现之前不存在的自定义输入没有被选中，所以点击回车键并没有选中它们。现在，如果在 IE 中，我将添加一个条件来忽略这一行。

Answer 1

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

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 );
});

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

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