我尝试在网页中使用最新的select2 v4.0.3库。我在this page上使用了给定的示例进行标记和标记化。
我在不同的浏览器中对其进行了测试。它工作正常，但是在Internet Explorer v.11中，它的行为很奇怪:
我试图添加一个不在选项中的新元素。
输入几个字符后，光标被移开，我无法完成输入的单词。当我单击选择框以重新获得光标时，半输入的单词消失了。因此，似乎不可能输入超过3-4个字符。在IE中打开select2.github.io/examples页面时，我也遇到了同样的情况。
<html>
<head>
<link rel="stylesheet" href="css/select2.css" type="text/css" />
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
<script src="js/select2.full.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});
});
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</body>
</html>
在不使用标记的情况下，select2在IE中也可以正常工作。但是我想使用多选，带标签的控件，用户还可以在其中输入自由文本作为选定选项。
select2是否也有一种变通办法，使其也可以与IE中的标记和标记化一起使用？
在IE11上使用的Fiddle example进行测试。
与问题有关的issue on GitHub。
最佳答案
这两个类:select2-container--focus select2-container--open分别在输入元素具有焦点和打开选项下拉菜单时位于输入的容器中。
当我们开始输入内容时，打开下拉菜单会使输入元素失去焦点(模糊)。 Select2需要重新关注该元素。实际上，在Select2源代码中，我们可以看到更新方法是通过重新关注元素:this.$search.focus()(check here)来完成的。
该代码在大多数浏览器中都可以正常工作，但在IE v11中却不能，因为IE并没有重新专注于此Select2源代码的输入。类select2-container--focus消失，焦点停留在下拉菜单上，从而创建了错误。
在Select2的最新版本中，他们似乎尝试了修复程序:check here。
可悲的是，在对其进行测试之后，它仍然无法正常工作。我在这里看到的唯一解决方案是覆盖Select2源代码，直到发布修复程序为止。否则，您需要使用不存在该错误的版本(例如，注释中提到的4.0.2)。
根据GitHub问题(尤其是这个问题:GitHub issue)，一个解决方案可能是:
JS Fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
// Override update method
$.fn.select2.amd.require._defined['select2/selection/search'].prototype.update = function(a, b) {
var c = this.$search[0] == document.activeElement;
this.$search.attr("placeholder", "");
a.call(this, b);
this.$selection.find(".select2-selection__rendered").append(this.$searchContainer);
this.resizeSearch();
if (c) {
var self = this;
window.setTimeout(function() {
self.$search.focus();
}, 0);
}
};
$(document).ready(function() {
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});
});
</script>
<select class="js-example-tokenizer" multiple="multiple" style="width: 600px;">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>