在WordPress后台用Select2实现AJAX自动补全遇到问题

问题现象 #

在WordPress后台尝试用Select2结合AJAX实现自动补全，但AJAX请求未正常工作。JavaScript已成功初始化Select2字段，控制台能看到初始化日志，但自动补全无响应，且PHP处理函数中的调试日志未触发，说明AJAX请求未到达服务器端函数。

现有实现代码 #

PHP AJAX请求处理函数 #

function get_tags_suggestions() {
    if (!current_user_can('edit_posts')) {
        error_log('get_tags_suggestions: Unauthorized'); // Debug log
        wp_send_json_error('Unauthorized', 403);
    }

    $search_term = sanitize_text_field($_GET['term']);
    error_log('get_tags_suggestions: Search term - ' . $search_term); // Debug log

    $tags = get_tags(array(
        'search' => $search_term,
        'hide_empty' => false,
    ));
    error_log('get_tags_suggestions: Tags found - ' . print_r($tags, true)); // Debug log

    $suggestions = array();
    foreach ($tags as $tag) {
        $suggestions[] = array(
            'id' => $tag->slug,
            'text' => $tag->name,
        );
    }

    wp_send_json_success($suggestions);
}

add_action('wp_ajax_get_tags_suggestions', 'get_tags_suggestions');

JavaScript AJAX请求代码 #

jQuery(document).ready(function($) {
    console.log('Custom admin JS is loaded');

    function setupAutocomplete(field, ajaxAction) {
        console.log('Setting up autocomplete for action: ' + ajaxAction);
        field.select2({
            ajax: {
                url: ajaxurl, // Use localized ajaxurl
                type: "POST", // Changed from GET to POST
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    console.log('Sending AJAX request for action: ' + ajaxAction + ' with term: ' + params.term);
                    return {
                        action: ajaxAction,
                        term: params.term || '',
                        page: params.page || 1,
                        security: my_ajax_object.nonce  // Added nonce for security
                    };
                },
                processResults: function(response, params) {
                    params.page = params.page || 1;
                    console.log('Received response: ', response);
                    
                    // Handle errors
                    if (response.success === false) {
                        console.error('Error in AJAX response:', response.data);
                        return { results: [] };
                    }
                    
                    return {
                        results: response.data,
                        pagination: {
                            more: (params.page * 30) < response.total_count
                        }
                    };
                },
                cache: true,
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('AJAX error:', textStatus, errorThrown);
                }
            },
            placeholder: 'Search for a ' + ajaxAction.split('_')[1],
            minimumInputLength: 0,
            width: '100%'
        });
    }

    // Initialize autocomplete for the fields
    setupAutocomplete($('[name="tags"]'), 'get_tags_suggestions');
    setupAutocomplete($('[name="categories"]'), 'get_categories_suggestions');
    setupAutocomplete($('[name="taxonomies"]'), 'get_taxonomies_suggestions');
    setupAutocomplete($('[name="authors"]'), 'get_authors_suggestions');
});

脚本注册与AJAX地址本地化 #

function enqueue_admin_scripts() {
    // Load Select2
    wp_enqueue_script('select2', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js', array('jquery'), '4.0.13', true);
    wp_enqueue_style('select2', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css', array(), '4.0.13');

    // Load custom JS
    wp_enqueue_script('custom-admin-js', get_template_directory_uri() . '/js/custom-admin.js', array('jquery', 'select2'), '1.0', true);
    wp_localize_script('custom-admin-js', 'my_ajax_object', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('my_nonce')
    ));
}
add_action('admin_enqueue_scripts', 'enqueue_admin_scripts');

已完成的检查 #

• PHP函数已正确绑定到wp_ajax_get_tags_suggestions动作钩子
• my_ajax_object变量已通过本地化传递到前端，控制台可正常访问
• PHP中的调试日志未生成，确认服务器端函数未被调用

待解疑问 #

1. AJAX请求配置是否存在遗漏或错误？
2. 如何验证AJAX请求是否正常发送，以及服务器是否接收？
3. 在WordPress后台使用Select2结合AJAX时，有哪些常见的容易踩的陷阱？

内容的提问来源于stack exchange，提问作者Matteo Didonè