如何在新增记录后自动触发Select2按createdId搜索？

我有一个添加表单，提交后会向数据表新增一条记录并获取返回的createdId。同一页面的另一个表单包含Select2元素，我希望在新增记录完成后，自动用该createdId进行搜索，无需用户手动操作，让Select2自动加载并显示这条新增记录的数据。但目前网络面板里只能看到添加记录的AJAX请求，Select2的搜索AJAX请求从未触发，请问怎么触发这个搜索操作？

原代码 #

var createdId;
// Ajax call to add new foreas or contact
$('#add_form').submit(function (event) {
    // Prevent default form submission
    event.preventDefault();

    // Serialize form data
    var formData = $(this).serialize();

    // AJAX call
    $.ajax({
        type: 'POST',
        url: "<?php echo site_url('my/addContact');?>",
        data: formData,
        dataType: 'json',
        success: function (response) {
            // Handle the response from the server
            if (response.success) {
                // Data insertion successful
                createdId = response.created_id;
            } else {
                // Data insertion failed
                console.error('Failed to insert data: ' + response.message);
            }
        },
        error: function (xhr, status, error) {
            console.error('Error occurred during AJAX request: ' + error);
        }
    });
});

console.log('Here, createdId is ' + createdId); // Id is printed in the console

// Retrieve records from contacts
$('.ajax-requests-select3').select2({
    language: {
        searching: function () {
            return "Searching...";
        },
        loadingMore: function () {
            return "Loading more results..."
        }
    },
    placeholder: "Select - Search",
    allowClear: true,
    ajax: {
        delay: 250,
        allowClear: true,
        url: '<?= base_url("contacts/search_contacts") ?>',
        dataType: 'json',
        cache: true,
        data: function (params) {
            var query = {
                term: params.term || createdId, // <<< Here I am assigning the id
                page: params.page || 1
            }
            return query;
        },
    }
});

问题原因 #

1. 变量时机问题：页面初始化Select2时，createdId还未被赋值（表单提交是异步操作，初始化代码先执行），此时params.term || createdId等价于params.term || undefined，Select2不会触发无关键词的搜索。
2. 无主动触发逻辑：即使createdId后续被赋值，Select2也不会自动感知变量变化并发起请求，必须主动调用搜索方法。

解决方法 #

修改代码，保存Select2实例并在添加成功的回调中主动触发搜索：

var createdId;
// 保存Select2实例，方便后续调用方法
var select2Instance;

// Ajax call to add new foreas or contact
$('#add_form').submit(function (event) {
    event.preventDefault();
    var formData = $(this).serialize();

    $.ajax({
        type: 'POST',
        url: "<?php echo site_url('my/addContact');?>",
        data: formData,
        dataType: 'json',
        success: function (response) {
            if (response.success) {
                createdId = response.created_id;
                // 主动触发Select2搜索，传入createdId作为关键词
                select2Instance.search(createdId).trigger('input');
            } else {
                console.error('Failed to insert data: ' + response.message);
            }
        },
        error: function (xhr, status, error) {
            console.error('Error occurred during AJAX request: ' + error);
        }
    });
});

// Retrieve records from contacts
select2Instance = $('.ajax-requests-select3').select2({
    language: {
        searching: function () {
            return "Searching...";
        },
        loadingMore: function () {
            return "Loading more results..."
        }
    },
    placeholder: "Select - Search",
    allowClear: true,
    ajax: {
        delay: 250,
        url: '<?= base_url("contacts/search_contacts") ?>',
        dataType: 'json',
        cache: true,
        data: function (params) {
            var query = {
                term: params.term || '',
                page: params.page || 1
            }
            return query;
        },
    }
});

关键说明 #

• 提前保存Select2实例到变量select2Instance，避免重复查找DOM元素。
• 在添加成功的回调中，使用search(createdId)设置搜索关键词，再通过trigger('input')强制触发AJAX请求。
• 移除原代码中data函数里的params.term || createdId，因为主动搜索时params.term会直接传入createdId，无需依赖全局变量。

内容的提问来源于stack exchange，提问作者D.B.