jQuery Select2 搜索时如何调用自定义函数 控制自定义加载spinner

之前尝试全部失效的核心原因 #

• 绑定原生<select>元素的事件：Select2初始化后会把原生select隐藏，键盘输入、搜索过程的交互都是由Select2动态生成的独立DOM完成的，根本不会触发原元素的keyup类事件；而change事件只有用户选中最终选项后才会触发，搜索过程完全不会触发。
• 直接选择.select2-search__field绑定事件：这个搜索框DOM是Select2初始化后才动态生成的，你在初始化前的代码里用类选择器查找时，这个元素还不存在，自然绑定不到任何事件。
• 覆盖query配置：Select2开启ajax模式时，内部已经实现了完整的query逻辑，用来处理请求、解析返回数据、渲染选项。你直接在根配置写一个自定义query函数，会完全覆盖原有内置逻辑，导致Select2没有正常的数据处理流程，功能完全失效。
• 错误层级添加success回调：你写的success放在了Select2的根配置层级，不是ajax请求的有效配置参数，Select2内部根本不会读取这个配置，自然不会触发；就算把success放在ajax配置层级，遇到请求超时、报错、被新搜索打断的场景，也没法保证回调一定执行，容易出现spinner一直显示不消失的问题。

正确实现逻辑 #

直接使用Select2 4.x版本自带的请求生命周期钩子事件，这套钩子和你配置的最小输入长度、ajax请求逻辑完全对齐，不会出现时机错配的问题：

• select2:request-start：Select2真正发起ajax搜索请求、界面弹出"Searching..."提示的瞬间触发，刚好匹配显示自定义spinner的时机
• select2:request-end：不管请求成功、失败、超时、被新的搜索中断，只要当前请求流程结束就会触发，用来隐藏spinner，无遗漏场景
• 这两个事件都直接绑定在原生<select>元素上，不需要去操作Select2动态生成的下拉框DOM。

修正后的完整代码 #

$( document ).ready(function() {
    let myLoading = $('#myLoading'); // 居中显示在屏幕上的加载图片
    let mySelect = $('#mySelect');
    
    myLoading.hide();
    
    let js_mySelect = {
        init: function () {
            mySelect.select2({
                ajax: {
                    url: 'myUrl',
                    dataType: 'json'
                }
            });

            // 核心：绑定请求生命周期事件
            // 发起搜索请求时显示spinner
            mySelect.on('select2:request-start', function() {
                myLoading.show();
            });
            // 请求结束时隐藏spinner
            mySelect.on('select2:request-end', function() {
                myLoading.hide();
            });
        },
    };
    js_mySelect.init();
});

注意：事件必须在Select2初始化完成之后再绑定，不然会因为Select2还没完成事件挂载导致触发失效。

补充说明：你配置的data-minimum-input-length="3"会被Select2自动识别，未达到最小输入长度时不会发起请求，对应的request-start事件也不会触发，完全不会出现未发起请求就错误显示spinner的问题。

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