WooCommerce Select2 match US/ Canada, etc states by beginning of string not just any match

Question

WooCommerce uses select2 in the shipping and billing address field for state and country. I want to make it so that when you search for ka the top result is Kansas not Alaska.

I checked the documentation for select2 and found this:

https://select2.org/searching#customizing-how-results-are-matched

But that solution is for when there are children. I don't know how to edit the documented example to make it work with WooCommerce. Another SO article suggests this:

function matchCustom(term, text) {
  console.log('matcher is running');
  if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
    return true;
  }
}
jQuery( document ).ready(function() {

  $(".state_select").select2({
    matcher: matchCustom
  });
});

With the above code, when I search for ka the top result is Alaska not Kansas.

I looked at the following SO questions:

jquery select2 plugin how to match only beginning of word

jquery select2 plugin how to get only the result 'myString%'

select2 search - match only words that start with search term

Answer 1

You can do it like so:

1. The script file (I named it my-wc-country-select.js):

   jQuery( function( $ ){
       if ( ! $().selectWoo ) {
           return;
       }
   
       // Based on <https://select2.org/searching#customizing-how-results-are-matched>
       function matchCustom(params, data) {
           // If there are no search terms, return all of the data
           if ($.trim(params.term) === '') {
               return data;
           }
   
           // Do not display the item if there is no 'text' property
           if (typeof data.text === 'undefined') {
               return null;
           }
   
           // `params.term` should be the term that is used for searching
           // `data.text` is the text that is displayed for the data object
           var s = $.trim( params.term ).toLowerCase();
           var s2 = $.trim( data.text ).toLowerCase();
           if ( s === s2.substr( 0, s.length ) ) {
               return data;
           }
   
           // Return `null` if the term should not be displayed
           return null;
       }
   
       function country_select_select2() {
           // Apply the custom "matcher" to the country and state drop-downs.
           $( 'select.country_select:visible, select.state_select:visible' ).selectWoo( {
               // We're just changing this option.
               matcher: matchCustom
           } );
       }
   
       country_select_select2();
   
       $( document.body ).bind( 'country_to_state_changed', function() {
           country_select_select2();
       });
   } );
   

   Reference

2. Load the file on the front-end: (this code would go in the theme functions file)

   wp_enqueue_script( 'my-wc-country-select', 'path/to/my-wc-country-select.js', [ 'wc-country-select' ] );
   

   Make sure wc-country-select is added as a dependency.