select2 version 4 ajax data : results not appearing in control

Question

Since I have switched to version 4 of the select2 plugin, my ajax calls do not work anymore.

I get a response in the form of an array which prints ok in the console but the results don't show in the select2 control.

http response :

{"results":{"id":"ok","term":"ok","description":"ok"}}

My code :

            $(function(){
                $('#appbundle_marketplace_product_ingredient_barcode').select2({
                    minimumInputLength: 3,
                    ajax:
                    {
                        delay: 250,
                        url: "{{ path('search_barcode') }}",
                        dataType: 'json',
                        debug: true,
                        data: function (params) {
//                            console.log(params.term);
                            return {barcode: params.term};},
                        processResults: function (data) {
                            console.log(data);
                            return data;
                        }
                    }
                });
            });

the data printed in the console is the following object :

Object {results: Object}
results: Object
  description: "ok"
  id: "ok"
  term: "ok"
__proto__: Object
__proto__: Object

How can I have the select2 display a result in the dropdown, then click the result to have it selected ?

Thanks a lot,

Answer 1

Great question, same issue I ran into.

I had a similar issue, working in Wordpress. I had to update my php to return this:

// This prepared SQL query returns objects, so I thought I was fine 
$partList = $wpdb->get_results( $sql );
// echo json_encode( $partList ); <- worked, but not quite right...

// Select2 wanted an array of items, so I added this
$jsonItems = array("items"=>$partList);
echo json_encode( $jsonItems );

In my JS I have this...

function formatPartSelection(ajaxData){
        return ajaxData.commonName || ajaxData.text;
}

function formatAjaxResponse (ajaxData){
    if(ajaxData.loading) return ajaxData.text;

    var markup = '<div class="clearfix select2-result-selectable" style="border-bottom:solid; border-bottom-color: #D3D3D3">' +
        '<div class="col-sm-10">' +
        '<div class="clearfix">' +
        '<div class="col-sm-10"><span style="font-weight: bold;">' + ajaxData.fieldOne + ' | ' + ajaxData.text + '</span></div>' +
        '</div>';

    if (ajaxData.description) {
        markup += '<div class="col-sm-10">' +
        '<div class="clearfix">' +
        '<div><i>' + ajaxData.description + '</i></div>';
    }

    markup += '</div><br/></div>';

    return markup;
}

$.fn.select2.amd.require(
    ["select2/core", "select2/utils", "select2/compat/matcher"],
    function (Select2, Utils, oldMatcher) {
    });

$('.myClass').select2({
    placeholder: "Select part(s)...",
    minimumInputLength: 3,
    multiple: true,
    ajax: {
        url: url_to_your_php,
        delay: 250,
        type: "POST",
        dataType: 'json',
        data: function (params) {
            var queryParameters = {
                action: 'my_enqued_wp_ajax',
                searchStringValue: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {                   
            console.log(data);
            return {
                results: data.items
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    templateResult: formatAjaxResponse,
    templateSelection: formatPartSelection
});

The above code allowed me to get the list of items to select from working, but I couldn't actually click any of them. Many hours later, I found this answer which helped me to actually be able to select one of the values in my Select2 dropdown list:

https://stackoverflow.com/a/29082217/4266699

*Note, I had the luxury of creating a column in my DB called ID, so I was able to fix this on the backend.

Hope this helps!