Add a searchbox to a dropdown Wordpress - html

Question

I'm using Woocommerce and have edited the Towns/Cities checkout form to include a dropdown of 500 towns and cities that I need users to choose from. How do I implement a searchbox, so that they are able to search for their town?
Basically, how do I create something like this:
for this:
I'm customising that field in Woocommerce, using the following code
add_filter( 'woocommerce_default_address_fields' , 'customize_checkout_city_field' );
function customize_checkout_city_field( $address_fields ) {
// Set HERE the cities (one line by city)
$towns_cities_arr = array(
'0' => __('Select your city', 'my_theme_slug'),
'paris' => 'Paris',
'versailles' => 'Versailles',
'cannes' => 'Cannes',
);
// Customizing 'billing_city' field
$address_fields['city']['type'] = 'select';
$address_fields['city']['class'] = array('form-row-last', 'my-custom-class'); // your class here
$address_fields['city']['label'] = __('Town / city', 'my_theme_slug');
$address_fields['city']['options'] = $towns_cities_arr;
// Returning Checkout customized fields
return $address_fields;
}

Answer 1

This plugin you want to use is Select2
https://select2.github.io/examples.html
You already have the custom class on your field called my-custom-class
All you need to do is import the select2 libs. You can do this in your theme functions.php.
function mytheme_enqueue_custom_scripts() {
wp_enqueue_style( 'select2-css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' );
wp_enqueue_script( 'select2-js', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_custom_scripts' );
And then add some jQuery to initialize it.
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$(".my-custom-class").select2();
});
</script>