本文介绍如何通过事件委托方式监听 select2 动态生成的搜索输入框（`.select2-search__field`），并在用户键入时实时将其内容自动转换为大写字母，解决原生 `onkeyup` 属性无法直接绑定的问题。
Select2 是一个功能强大的下拉选择增强库，其搜索输入框是动态创建的 DOM 元素，并非初始化时就存在于页面中。因此，你无法像普通 那样直接在 HTML 中添加 onkeyup="mayus(this)"，也无法用 $('.select2-search__field').on('keyup', ...) 直接绑定——因为该元素可能尚未渲染。
✅ 正确做法是使用 事件委托（Event Delegation）：将事件监听器绑定到一个长期存在的父级容器（如 document 或 body），并指定目标选择器 .select2-search__field。当键盘事件冒泡至该容器时，jQuery 会自动匹配当前触发事件的元素是否符合选择器条件。
以下是推荐的实现代码（需确保 jQuery 和 Select2 已正确加载）：
$(document).on('input', '.select2-search__field', function(e) {
// 使用 'input' 事件更健壮（兼容粘贴、剪切、自动填充等场景）
const input = e.target;
const currentValue = input.value;
// 只在值发生变化且含小写字母时更新，避免不必要的重绘
if (/^[a-z]/.test(currentValue)) {
input.value = currentValue.toUpperCase();
}
});⚠️ 注意事项：
- 推荐使用 'input' 而非 'keyup'：input 事件能捕获所有输入变更（包括鼠标粘贴、语音输入、自动补全等），而 keyup 仅响应按键释放，易漏掉非键盘操作；
- 若 Select2 版本较新（v4+），搜索框类名固定为 .select2-search__field；旧版（v3.x）可能为 .select2-input，请按实际 DOM 结构调整选择器；
- 该逻辑不影响 Select2 的内部筛选行为——转换仅作用于显示值，搜索仍基于原始大小写敏感规则（如需忽略大小写搜索，请额外配置 matcher 函数）；
- 如页面中存在多个 Select2 实例，上述代码可全局生效，无需重复绑定。
? 扩展建议：若需同时支持中文、数字及符号的“仅字母大写”，可优化正则替换逻辑：
input.value = input.value.replace(/[a-z]/g, char => char.toUpperCase());
这样既保留非字母字符原样，又精准转换英文字母，提升用户体验与兼容性。
