本文介绍如何通过事件委托为 select2 动态生成的搜索输入框绑定 `keyup` 事件，使其用户输入实时转换为大写字母，解决原生 `onkeyup` 属性无法直接应用的问题。

Select2 是一款功能强大的下拉选择增强库，但它会动态创建搜索输入框（通常类名为 .select2-search__field），该元素不在初始 DOM 中，因此无法直接通过 onkeyup 属性或常规 $(selector).on('keyup', ...) 绑定事件——因为选择器在初始化时找不到目标元素。

正确做法是使用 事件委托（Event Delegation）：将事件监听器绑定在文档（或一个始终存在的父容器）上，并指定实际触发事件的目标选择器。这样，即使 .select2-search__field 后续动态插入，事件仍能被准确捕获。

✅ 推荐解决方案如下：

$(document).on('keyup', '.select2-search__field', function(e) {
    // 防止非字母数字字符被意外处理（可选增强）
    if (e.key && /[\p{L}\p{N}]/u.test(e.key)) {
        this.value = this.value.toUpperCase();
    }
});

⚠️ 注意事项：

• 请确保此代码在 Select2 初始化之后执行（例如放在 $(document).ready() 内，且位于 $('.my-select').select2({...}) 调用之后）；
• 若页面中存在多个 Select2 实例，该委托会统一生效，无需重复绑定；
• e.target.value.toUpperCase() 是安全的字符串操作，对空值、null 或 undefined 无副作用（但建议保持输入框 type="text"）；
• 如需兼容中文、日文等 Unicode 字母，上述正则 /[\p{L}\p{N}]/u 可保留；若仅需 ASCII 大写，可简化为 /[a-z]/ 并配合 this.value = this.value.replace(/[a-z]/g, c => c.toUpperCase()) ——但直接 toUpperCase() 更简洁通用。

? 扩展建议：若还需支持粘贴（paste）事件的大写转换，可补充：

$(document).on('paste', '.select2-search__field', function(e) {
    setTimeout(() => {
        this.value = this.value.toUpperCase();
    }, 0);
});

综上，利用事件委托是操作 Select2 动态控件的标准实践。掌握这一模式，不仅能解决自动大写问题，也为处理其他动态生成表单元素（如日期选择器输入框、Tagify 输入域等）提供了通用思路。