Making a filter searchable on the page of post list at WordPress backend

here are some notes:

1. It’s important to enqueue scripts and styles properly in WordPress. You should enqueue the Select2 script and its styles using the WordPress enqueue system. This ensures that they are loaded correctly and in the right order.
2. Use WordPress AJAX for Dynamic Data Loading: If the list of users is large, loading all usernames at once can be slow and resource-intensive. To improve performance, you can use WordPress AJAX to load usernames dynamically as the user types in the search box.
3. Add this code to your themes functions.php file

// Enqueue scripts and styles
function wpb_enqueue_scripts_author_dropdown() {
    wp_enqueue_style('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css');
    wp_enqueue_script('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js', array('jquery'), null, true);
    wp_enqueue_script('author-dropdown-script', get_stylesheet_directory_uri() . '/includes/js/author-dropdown.js', array('jquery', 'select2'), mt_rand(00000, 9999999), true);

    wp_localize_script('author-dropdown-script', 'wpb_author_dropdown', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'wpb_enqueue_scripts_author_dropdown');

// AJAX handler for fetching usernames
function wpb_ajax_fetch_usernames() {
    $search_term = isset($_GET['q']) ? sanitize_text_field($_GET['q']) : '';
    $users = get_users(array('search' => '*' . esc_attr($search_term) . '*'));
    $user_names = wp_list_pluck($users, 'user_login');
    wp_send_json($user_names);
}
add_action('wp_ajax_fetch_usernames', 'wpb_ajax_fetch_usernames');

// Create a shortcode for the dropdown
function wpb_author_dropdown_shortcode() {
    ob_start();
    ?>
    <select id="author" style="width: 50%"></select>
    <?php
    return ob_get_clean();
}
add_shortcode('wpb_author_dropdown', 'wpb_author_dropdown_shortcode');

Now you can call your html by using the shortcode [wpb_author_dropdown] in a text editor or code box, or, you can use the do_shortcode function in a php file like this:

<?php echo do_shortcode('[wpb_author_dropdown]'); ?>

OR

echo do_shortcode('[wpb_author_dropdown]');

Now, in your theme directory create this file:
/includes/js/author-dropdown.js
In that add this code:

jQuery(document).ready(function($) {
    $("#author").select2({
        ajax: {
            url: wpb_author_dropdown.ajax_url,
            dataType: 'json',
            data: function (params) {
                return {
                    action: 'fetch_usernames',
                    q: params.term // search term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item,
                            id: item
                        };
                    })
                };
            }
        }
    });
});