如何在keyup事件触发时修改select2搜索框的输入文本？

实现逻辑 #

Select2的搜索输入框是组件初始化后动态插入的DOM元素，直接给原生select绑定事件无法生效，需要针对动态生成的搜索框做事件绑定，同时处理光标偏移、组件值同步的问题：

• 先做孟加拉数字到英语数字的映射替换
• 用事件委托绑定动态生成的搜索框输入事件，覆盖键盘输入、粘贴、软键盘输入等所有场景
• 替换内容后还原光标位置，避免输入时光标跳转到开头
• 手动触发组件输入事件，保证Select2能正常识别新值过滤下拉选项

完整代码 #

HTML部分 #

<div class="form-group col-md-3 col-sm-12">
    <label for="">Select Number</label>
    <select name="number" id="number" class="form-control select">
        <option value="1" selected disabled>Select Number</option>
        <option value="2">123654</option>
        <option value="3">654564</option>
        <option value="4">879871</option>
        <option value="other">Other</option>
    </select>
    <span id="error_name" class="has-error"></span>
</div>

JS部分 #

// 初始化Select2
$(".select").select2();

/**
 * 孟加拉数字转英语数字
 * @param {string} str 原始输入字符串
 * @returns {string} 转换后的字符串
 */
const bnToEnNum = (str) => {
    const numMap = {
        '০': '0', '১': '1', '২': '2', '৩': '3', '৪': '4',
        '৫': '5', '৬': '6', '৭': '7', '৮': '8', '৯': '9'
    };
    return str.replace(/[০-৯]/g, match => numMap[match]);
};

// 给Select2搜索框绑定输入事件，用事件委托兼容动态生成的DOM
$(document).on('input', '.select2-search__field', function () {
    const $input = $(this);
    const rawVal = $input.val();
    const convertedVal = bnToEnNum(rawVal);
    
    // 没有需要替换的孟加拉数字直接返回，减少不必要操作
    if (rawVal === convertedVal) return;

    // 记录当前光标位置
    const caretPosition = this.selectionStart;
    // 更新输入框值
    $input.val(convertedVal);
    // 还原光标位置，避免光标跳转到输入框开头
    this.setSelectionRange(caretPosition, caretPosition);
    // 触发input事件通知Select2更新过滤结果
    $input.trigger('input');
});

注意事项 #

• 不要用keyup事件监听输入，input事件可以覆盖粘贴、触屏设备软键盘输入、输入法联想输入等更多场景，不会出现漏处理的情况
• 光标位置还原是必须的，否则每次替换内容后光标会自动跳到输入框最左侧，严重影响输入体验
• 事件委托绑定到document上，页面后续动态新增的Select2组件也能自动生效，不需要重复绑定事件

内容的提问来源于stack exchange，提问作者Julan Mohajan