Select2搜索框自动转大写设置方法

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Select2 搜索框中自动输入转大写方法》，聊聊，我们一起来看看吧！

本文介绍如何通过事件委托方式监听 Select2 动态生成的搜索输入框（`.select2-search__field`），并在用户键入时实时将其内容自动转换为大写字母，解决原生 `onkeyup` 属性无法直接绑定的问题。

Select2 是一个功能强大的下拉选择增强库，其搜索输入框是动态创建的 DOM 元素，并非初始化时就存在于页面中。因此，你无法像普通 <input> 那样直接在 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());

这样既保留非字母字符原样，又精准转换英文字母，提升用户体验与兼容性。

终于介绍完啦！小伙伴们，这篇关于《Select2搜索框自动转大写设置方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！