WooCommerce - How to add only custom countries to select on checkout page and keep autocomplete feature?

Question

I have to display only allowed shipping countries in the select box on the checkout page. I added my custom list using the code below, but it breaks the autocomplete feature and leaves normal select (red border on screenshot).

How to add only custom countries and keep the autocomplete?

function woo_override_checkout_fields( $fields ) {

    $fields['shipping']['shipping_country'] = array(
        'type'      => 'select',
        'required'=>true,
        'label'     => __('Country', 'shop'),
        'options'   => getAllowedCountries()
    );



    $fields['billing']['billing_country'] = array(
        'type'      => 'select',
        'required'=>true,
        'label'     => __('Country', 'shop'),
        'options'   => getAllowedCountries()
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'woo_override_checkout_fields' );

Answer 1

I've already resolved it, the solution was simple:

$(document).ready(function() {
    $("#billing_country,#shipping_country").select2();
});