Preselecting option in an remotely sourced (AJAX) Select2

Question

I am trying to preselect an option in select2 from a remotely sourced select2 control. I am trying to follow the documentation Preselecting options in an remotely-sourced (AJAX) Select2

I have an aspnet core razor page that displays address information.

The state and zip information is displayed when the page loads, if its already in the database. If the data is not in the database, the location information (city, state, zip) is input into the form by selecting the city.

The only problem I have is displaying the city when the page loads if its already present in the database. The screenshot below should have the city "Chandler" for the city.

Here is the relevant portion of the razor page.

     <div class="col-md-7">
     <span><label asp-for="Organization.City"></label>&nbsp; <i class="fas fa-question-circle" title="@Html.TextBoxWithToolTipFor(m=> Model.Organization.City)"></i></span>
     <input type="text" class="form-control" asp-for="Organization.City" type="hidden">
     <select class="form-control" id="selectCity">
         <option value=""></option>
     </select>
     <span asp-validation-for="Organization.City" class="text-danger"></span>
 </div>
 <div class="col-md-3">
     <span><label asp-for="Organization.State"></label>&nbsp; <i class="fas fa-question-circle" title="@Html.TextBoxWithToolTipFor(m=> Model.Organization.State)"></i></span>
     <input type="text" class="form-control" asp-for="Organization.State" readonly>
     <span asp-validation-for="Organization.State" class="text-danger"></span>
 </div>

 <div class="col-md-2">
     <span><label asp-for="Organization.PostalCode"></label>&nbsp; <i class="fas fa-question-circle" title="@Html.TextBoxWithToolTipFor(m=> Model.Organization.PostalCode)"></i></span>
     <input type="text" class="form-control" asp-for="Organization.PostalCode" readonly>
     <span asp-validation-for="Organization.PostalCode" class="text-danger"></span>
 </div>

Here is my select2 code along with console output. I get no errors, I am just not able to get the city preselected.

 <script>
    $(document).ready(function () {
        $("#selectCity").select2({
            theme: 'bootstrap-5',
            placeholder: "Search for your city",
            dropdownAutoWidth: true,
            width: 'auto',
            minimumInputLength: 3,
            allowClear: true,
            async: true,
            templateResult: ({ city, state, zip }) => `${city}, ${state} ${zip}`,
            templateSelection: function (result) {

                if (result['id'] == "") {
                    result['city'] = result['text'];
                }

                return result['city'];
            },
            ajax: {
                url: ({ term }) =>
                    "@GatewaySettings.Value.Url" +
                    `/api/location/cities/${encodeURIComponent(term)}`, // encode the term,
                processResults: (results) => ({ results }),
            }
        }).on('select2:select', function (e) {
            var data = e.params.data;
            //console.log(data);

            if (data.id != "") {
                $("#Organization_City").val(data.city);
                $("#Organization_State").val(data.state);
                $("#Organization_PostalCode").val(data.zip);
            }
        }).on('select2:clear', function (e) {
            var data = e.params.data;
            // console.log(data);

            $("#Organization_City").val('');
            $("#Organization_State").val('');
            $("#Organization_PostalCode").val('');
        });

        if ($("#Organization_PostalCode").val() != "") {

            var selectCity = $('#selectCity');

            $.ajax({
                type: 'GET',
                url: "@GatewaySettings.Value.Url" +
                    `/api/location/postalcode/${encodeURIComponent(@Model.Organization.PostalCode)}` // encode the term,
            }).then(function (data) {
                console.log(data);
                // create the option and append to Select2
                var option = new Option(data.city, data.id, true, true);
                selectCity.append(option).trigger('change');

                // manually trigger the `select2:select` event
                selectCity.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        
        }           
    });
</script>

Any help appreciated

Answer 1

After a little more research on select2 website and this SO post I got it all working.

Here is my updated working code

 <script>
 $(document).ready(function () {
     $("#selectCity").select2({
         theme: 'bootstrap-5',
         placeholder: "Search for your city",
         dropdownAutoWidth: true,
         width: 'auto',
         minimumInputLength: 3,
         allowClear: true,
         async: true,
         templateResult: function (result) {

             if (result.loading) return "Loading....";

             return result['city'] + ', ' + result['state'] + ' ' + result['zip']
             
         },
         templateSelection: function (result) { return result['city'] || result['text']; },
         ajax: {
             url: ({ term }) =>
                 "@GatewaySettings.Value.Url" +
                 `/api/location/cities/${encodeURIComponent(term)}`, // encode the term,
             processResults: (results) => ({ results }),
         }
     }).on('select2:select', function (e) {           
         var data = e.params.data;
         
         $("#Organization_City").val(data.city);
         $("#Organization_State").val(data.state);
         $("#Organization_PostalCode").val(data.zip);

     }).on('select2:clear', function (e) {
         var data = e.params.data;

         $("#Organization_City").val('');
         $("#Organization_State").val('');
         $("#Organization_PostalCode").val('');
     });

     if ($("#Organization_PostalCode").val() != "") {

         var selectCity = $('#selectCity');

         $.ajax({
             type: 'GET',
             url: "@GatewaySettings.Value.Url" +
                 `/api/location/postalcode/${encodeURIComponent(@Model.Organization.PostalCode)}`, // encode the term,
             processResults: (results) => ({ results })
         }).then(function (data) {
             // create the option and append to Select2
             var option = new Option(data.city, data.id, true, true);

             selectCity.append(option).trigger('change');

             // manually trigger the `select2:select` event
             selectCity.trigger({
                 type: 'select2:select',
                 params: {
                     data: data
                 }
             });
         });
     
     }           
 });