Jquery – select2 automatically select an item for ajax request

is there any way to make select2 auto select an item on ajax request when an specific condition matches?

The below is my current code:

 const optionFormatSelect = (item) => {
    if (!item.id) {
        return item.text;
    }

    var span = document.createElement('span');
    var template = '';

    template += '<div class="d-flex align-items-center">';
    template += '<div class="d-flex flex-column">'
    template += '<span class="fs-6 fw-bold lh-1">' + item.name + '</span>';
    
    // Access the data attributes directly from item
    if (item.email) {
        template += '<span class="text-dark fs-7 owner-email">' + item.email + '</span>';
    }
    
    if (item.phone) {
        template += '<span class="text-dark fs-7 owner-phone">' + item.phone + '</span>';
    }

    template += '</div>';
    template += '</div>';

    span.innerHTML = template;

    return $(span);
}


function populateOwnerSelect(owner_id = null) {
    var ownerSelect = $('#owner_id');
    ownerSelect.empty();
    ownerSelect.select2({
        placeholder: "Select an owner",
        dropdownParent: $("#editModal"),
        ajax: {
            url: '{{ route('owners.getList') }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                if (owner_id !== null && params.term === undefined) {
                    return {
                        id: owner_id,
                    };
                } else {
                    return {
                        q: params.term,
                    };
                }
            },
            processResults: function (data, params) {
                return {
                    results: data.results,
                };
            },

            cache: true
        },
        escapeMarkup: function(markup) {
            return markup;
        },
        templateSelection: optionFormatSelect,
        templateResult: optionFormatSelect
    });
   if (owner_id !== null) {
        ownerSelect.select2('open');
        ownerSelect.val(owner_id).trigger('change');
    }
    
}

and the below i am calling in my another function to make the option selected:

  populateOwnerSelect(listing.owner_id);

But it only opens the dropdown but it do not make the option selected, please note I’ve added the select2 open trigger to just identify the issue as i was thinking the options are only listed once user opens the dropdown. But it still not making the option selected. Where I am wrong can anyone pelase check the code?

———————–Edited—————————–

after adding console.log() in this:

   processResults: function (data, params) {
                console.log(data);
                return {
                    
                    results: data.results,
                };
            },

i got this output in console:

{results: Array(1)}
results
: 
Array(1)
0
: 
email
: 
""
id
: 
17218
name
: 
" "
phone
: 
"971565266232"
refno
: 
"SP-O-1801"
[[Prototype]]
: 
Object
length
: 
1
[[Prototype]]
: 
Array(0)
[[Prototype]]
: 
Object

and this is my controller code:

public function getList(Request $request)
    {
        $searchTerm = $request->input('q');
        $searchTermId = $request->input('id');
        $query = owners::select('refno', 'id', 'name', 'email', 'phone')->orderBy('name');

        if ($searchTerm) {
            $query->where('name', 'like', '%' . $searchTerm . '%')
                ->orWhere('email', 'like', '%' . $searchTerm . '%')
                ->orWhere('refno', 'like', '%' . $searchTerm . '%')
                ->orWhere('phone', 'like', '%' . $searchTerm . '%');
        }
        if($searchTermId){
            $query->where('id', $searchTermId);
        }

        $owners = $query->limit(100)->get();
        return response()->json(['results' => $owners]);
    }