WooCommerce searchable drop down list

Question

so I've implemented a billing form with some custom fields, my drop down is:

$fields['billing_complex_name'] = array(
         'label' => __('Complex Name', 'woocommerce'), // Add custom field label
        'placeholder' => _x('E.g Raslouw Gardens', 'placeholder', 'woocommerce'), // Add custom field placeholder
        'required' => false, // if field is required or not
        'clear' => false, // add clear or not
        'type' => 'select',// add field type
          'options'     => array(
         '' => 'Please select',
                         'ansaarestate'=> 'Ansaar Estate',
              'bangladeshheights'=> 'Bangladesh Heights',
                        'celticmanor'=> 'Celtic Manor',
                        'chantelplace'=> 'Chantel Place',
             ... 
        'class' => array('my-css'),
          'priority' => 51,// 
   );

And then using jQuery I implement the following for changes:

jQuery(document).ready(function(){
    // Your code in here
  jQuery(document).on('input','#billing_complex_name', function() {
 
      myFunc();
})
function myFunc() {
    // your function code
//var phone_num = jQuery('#billing_phone').val(<?php $phone_number ?>);

    
var complex_name = jQuery('#billing_complex_name').val();

var suburb = jQuery('#billing_suburb').val();

if (complex_name == 'eldogleneast') {
   jQuery("#billing_suburb").val('ELD');
   jQuery('#billing_postcode').val('0157');
    jQuery("#billing_complex_address").val('');
jQuery("#billing_postcode").prop("readonly", false);

And of course depending on the selection of the complex conditions change such as the postcode or suburb etc. My question now is: I need to make the drop down list searchable and have an Other selection, if Other is selected I need a text input for the user to enter in and that will be the selected value (All jQuery then will just not make any changes to the postcode or anything)

Answer 1

Used select2.js library to implement it