Select2搜索框退格键失效问题求助（v4.1.0-rc.0）

使用Select2 v4.1.0-rc.0版本时，搜索功能正常，但退格键无法删除输入框中的内容，且不需要启用多选功能。

相关实现代码 #

function projID(id, tdDate, empKey) {
  debugger;
  $("#" + id).select2({
    minimumInputLength: 3,
    placeholder: "Put some text...",
    allowClear: true,
    //tags: true,
    selectOnClose: true,
    initSelection: function(element, callback) {
      debugger;
    },
    ajax: {
      url: 'getProjectsForTimecardException.action?empKey=' + empKey + '&tdDate=' + tdDate + '&auditLogsKeyword=' + menuData.globKeyword,
      contentType: 'application/json',
      dataType: 'json',
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function(data) {
        $("#" + id).empty().trigger('change');
        return {
          results: $.map(data, function(item) {
            debugger;
            return {
              text: item.value,
              id: item.key
            }
          })
        };
      },
      cache: false
    },
    //templateResult: formatResult
  });
}

已尝试多种常见解决方法但无进展，以下是用于测试的代码片段：

测试JS代码 #

$(document).ready(function() {
  $('#activityId').select2({
    placeholder: "Put some text...",
    allowClear: true
  });
});

测试HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select style="width: 100% !important; border: 1px solid #0B3A42; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; height: 35px;border-radius: 5px 5px 5px 5px;" id="activityId">
  <option>--Hii --</option>
</select>

解决方案建议 #

1. 移除废弃的initSelection配置
   Select2 v4.0+ 已废弃initSelection方法，该方法会干扰组件内部事件处理逻辑，直接删除这部分代码即可。

2. 修改processResults中的DOM操作
   你在processResults里执行的$("#"+id).empty().trigger('change')会清空原select选项并触发change事件，可能导致输入框状态异常。移除这行代码，Select2会自动处理选项渲染：

processResults: function(data) {
  return {
    results: $.map(data, function(item) {
      return {
        text: item.value,
        id: item.key
      }
    })
  };
}

3. 检查全局事件冲突
   排查页面中是否有其他JS代码监听keydown/keyup事件并阻止了退格键的默认行为（比如调用event.preventDefault()）。可通过以下代码调试：

$(document).on('keydown', '.select2-search__field', function(e) {
  if (e.keyCode === 8) {
    console.log('Backspace pressed, default allowed:', !e.isDefaultPrevented());
  }
});

4. 测试版本兼容性
   v4.1.0-rc.0作为候选版本可能存在bug，建议升级到正式稳定版（如v4.1.0及以上），验证问题是否解决。

5. 确认select元素基础配置
   确保目标select元素未设置multiple属性，避免组件进入多选模式导致交互异常。

内容的提问来源于stack exchange，提问作者Atif Ansari