the processResult in select2 do not working

Question

I use select2 loading remote data I send an ajax request and get the response correctly but the processResult don't run and nothing will be show

the javascript code :

var formatProduct= 
function(product) {
    console.log("formatProduct");
    if (product.loading) return product.text;
    var markup =  '<div class="product-to-compare" data=' + product.id + '>' + product.name + '</div>' ;
    return markup;
  }
var formatProductSelection = 
function (product) {
console.log("formatProductSelection");
return product.name || product.text;
}
$(".js-data-example-ajax").select2({
    placeholder: "Search for product",
    minimumInputLength: 2,
    ajax: {
        url: '/product/ajax_product_list/',
        dataType: 'json',
        quietMillis: 300,
        data: function (params) {
            var id = $('#product-no-1').attr('data') ;
            return {
                key: params,
                id: id
            };
        },
        processResults: function (data) {
        return {
            results: data.items
        };     
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatProduct, // omitted for brevity, see the source of this page
  templateSelection: formatProductSelection // omitted for brevity, see the source of this page
});    

and the JSON that my controller return as a response :

{
"items": [
  {"id": "55dd980c8242b630cfaf4788", "name": "sallll"},
  {"id": "55d58d7a8242b62c6b88504e", "name" : "inja"}, 
  {"id": "55d58d558242b62c6b88504d", "name": "salam"}
  ]
}

Solution 1

You should rename your JSON to return text instead of name.

Note that if you're using an older version of select2 (<4) you should use results instead of processResults.

Solution 2

In my case, I was refreshing the page and looking for the http request sent to fetch search data. So make sure you do a search to processResult get called.

Solution 3

processResults: function (data) {
  //There is my solution.Just directly manipulate the data
  $.each(data.items, function(i, d) {
    data.items[i]['text'] = d.name;
  });
  return {
      results: data.items
  };
}

Comments

[MDK]

I just rename the name to text in JSON file but nothing happen ! and even when I put a console.log("something") in ProcessResults function nothing printed in browser console ! @uri2x

[uri2x]

Is it possible that you're getting cached data? Try removing cache:true.

[MDK]

I do it and still I can't get the response and now I found another problem ! my browser console show me an error that I can't understand it ! maybe it's cause of problem the error : TypeError: c.results is not a function ...taType,data:d,success:function(a){var b=c.results(a,i.page);i.callback(b)}}),e

[MDK]

yeah I just change processResult to results and now I receive the data in my drop down form !

[uri2x]

Congrats! (but you're probably using an old version of select2)

[MDK]

but when I use results function the delay property not working and browser send AJAX with every key down !

[MDK]

is there a way to use delay property in this old version of select2 ?

[MDK]

yeah man you were right ! the select2 that used in project was old I just update it and now everything is working good ! but if I don't edit my JSON file I have that problem even in new version of select2 ! thank you !

[Nico Haase]

Can you highlight the parts that solve the question? A reader should be able to learn quickly from your answer

[ruwan800]

Sorry for posting a stupid answer. Hope this helps someone anyway