Internet Explorer中Select2多选标签功能异常问题求助

这确实是Select2 4.x版本在Internet Explorer里的老兼容性问题了——IE的输入事件触发逻辑和现代浏览器存在差异，导致Select2会误判用户的输入状态，在你还没输完自定义标签内容时就自动把输入的字符封装成标签，直接打断输入流程。

针对你给出的代码场景，这里有几个经过验证的可行解决办法：

1. 明确配置tokenSeparators，移除空格类自动触发的分隔符 #

默认情况下，部分Select2版本会把空格、制表符这类输入时容易误触的字符当成标签分隔符，而IE的事件触发机制会放大这个问题。我们可以手动指定仅使用逗号、分号这类需要用户主动输入的分隔符，避免误触发：

$(document).ready(function() {
  $('#example1').select2({
    tags: true,
    // 只保留需要主动输入的分隔符，去掉空格、制表符
    tokenSeparators: [',', ';', '\n'],
    minimumInputLength: 3,
    multiple: true
  });
});

2. 重写createTag方法，强制只有手动触发才创建标签 #

通过自定义createTag逻辑，我们可以完全掌控标签创建的时机——只有当用户按下指定分隔符或者主动确认时才生成标签，彻底杜绝自动提前创建的情况：

$(document).ready(function() {
  $('#example1').select2({
    tags: true,
    tokenSeparators: [',', ';', '\n'],
    minimumInputLength: 3,
    multiple: true,
    createTag: function(params) {
      var inputTerm = $.trim(params.term);
      // 输入长度不够直接返回null，不创建标签
      if (inputTerm.length < this.minimumInputLength) {
        return null;
      }
      // 检查输入是否以指定分隔符结尾，只有满足才创建标签
      var hasSeparator = this.tokenSeparators.some(function(sep) {
        return inputTerm.endsWith(sep);
      });
      if (!hasSeparator) {
        return null;
      }
      // 移除结尾的分隔符，生成最终标签
      return {
        id: inputTerm.slice(0, -1),
        text: inputTerm.slice(0, -1)
      };
    }
  });
});

3. 添加防抖延迟处理，适配IE的事件触发节奏 #

IE的输入事件触发有延迟，我们可以通过防抖函数给Select2的输入判断加一个缓冲时间，确保用户有足够时间输完内容：

$(document).ready(function() {
  var inputDebounceTimer;
  $('#example1').select2({
    tags: true,
    tokenSeparators: [',', ';', '\n'],
    minimumInputLength: 3,
    multiple: true,
    // 重写本地标签的匹配逻辑，加入防抖
    ajax: {
      transport: function(params, successCallback, failureCallback) {
        clearTimeout(inputDebounceTimer);
        // 设置300ms延迟，可根据实际输入节奏调整
        inputDebounceTimer = setTimeout(function() {
          var inputTerm = $.trim(params.data.term);
          var tagResults = [];
          if (inputTerm.length >= 3) {
            tagResults.push({id: inputTerm, text: inputTerm});
          }
          successCallback(tagResults);
        }, 300);
      }
    }
  });
});

额外小提示 #

• 尽量升级到Select2的最新稳定版（4.0.13及以上），官方在后续版本里修复了不少IE相关的兼容性bug；
• 保持selectOnClose处于关闭状态（你代码里已经注释了这个配置，继续保留就好），避免关闭下拉框时自动创建标签；
• 测试时可以临时注释掉minimumInputLength，验证问题是否解决后再重新添加回来。

内容的提问来源于stack exchange，提问作者Sophia Jean Hawes-Tingey