Select2 Stuck On "Searching..." Dropdown Options AJAX

Question

I am facing an issue, where my Select2 dropdown keeps showing "Searching..." (screenshot attached)

Searching... stuck screenshot

This is my JS code:

<script>
    $(document).ready(function() {
        $("#js-data-example-ajax").select2({
            placeholder: 'Search for a stock',
            ajax: {
            url: "http://127.0.0.1:8000/stocks_list",
            contentType: 'application/json',
            dataType: 'json',
            type: "GET"
            },
        });
    });
</script>

HTML select field:

<select style="width: 300px;" id="js-data-example-ajax" name = "js-data-example-ajax" class="js-data-example-ajax"></select>

The endpoint in the AJAX call above returns a JSON object with "results" key and a list of objects for the search results (as expected by Select2), like below:

Response from local endpoint screenshot

I'm expecting to display the "text" fields as my dropdown results in the search results & I've followed the Select2 docs so far.

Answer 1

So your error is cause by CORS,

CORS is a pain in the ass for local development, how you deal with CORS is the target of the AJAX request must return specific headers, and the easiest way to do it in PHP is just to use the below code,

This is the most permissive you can be with CORS baring support for custom headers if you need to use custom headers you need to update the Access-Control-Allow-Headers and Access-Control-Expose-Headers headers

<?php
$givenOrigin = get_header("Origin")??get_header("origin");

header("Access-Control-Allow-Origin: {$givenOrigin}");
header("Access-Control-Allow-Headers: GET, POST, PUT, PATH, DELETE, OPTIONS, HEAD"); // this allows all HTTP methods
header("Access-Control-Allow-Methods: Origin, X-Requested-With, Content-Type, Accept, localization");
header("Access-Control-Expose-Headers: Origin, X-Requested-With, Content-Type, Accept, localization");