select2 load data using ajax cannot select any option

Question

I have the following code (javascript):

$('#cbxConnections').select2({
    minimumInputLength: 0,
    multiple: false,
    allowClear: true,
    placeholder:{
        text:"@Diccionario.Connections",
        id:" @Diccionario.Connections"
    },
    ajax:{
        url:'@Url.Action("GetActiveConnections","Admin")',
        dataType: 'json',
        type:'post',
        data:function(params){
            return {
                q: params.term
            };
        },
        processResults: function(data,page){
            return {
                results: data
            };
        }
    },
    escapeMarkup: function (markup) { 
        return markup; 
    },
    templateResult: function(response){
        return '<div>'+response.Name+'</div>';
    },
    templateSelection: function(response){
        return response.Id;
    },
    id: function(connection){
       console.log(connection);
    }
});

For the server side I am using ASP MVC 4. The select get data using ajax and render the options but this options are not selectable. Reading other posts, they describe using the id function, but this function appearently desappears on the version of select2 I'm using 2.4

I'm following the example of ajax on the documentation showing on github "Loading remote data"

Possible duplicate of [Unable to select a result from the select2 search results](https://stackoverflow.com/questions/15933830/unable-to-select-a-result-from-the-select2-search-results) — jgerman, Oct 01 '19 at 14:31

score 69 · Accepted Answer · answered Mar 16 '15 at 16:37

If your ajax response doesn't have id and text attributes you should fix them client side

This is a requirement on version 4.0 (don't know why)

ajax: {

   processResults: function (data, params) {

                params.page = params.page || 1;

                // you should map the id and text attributes on version 4.0

                var select2Data = $.map(data.result.data, function (obj) {
                    obj.id = obj._id.$id;
                    obj.text = obj.name;

                    return obj;
                });

                return {
                    results: select2Data,
                    pagination: {
                        more: data.result.more
                    }
                };
            }

 }

Thanks ! helped a lot. – victorkurauchi Feb 28 '17 at 14:05 — victorkurauchi, Feb 28 '17 at 14:05
Thanks for your explanation. – KostasC May 02 '17 at 17:07 — KostasC, May 02 '17 at 17:07
Perfect as I wanted. Thanks a lot. – sanjeev shetty May 22 '17 at 14:19 — sanjeev shetty, May 22 '17 at 14:19

score 0 · Answer 2 · answered Aug 25 '22 at 10:59

I had a problem that I could not unselect option (it was a select multiple) and the problem was that I passed id as an number, but it should be string

var select2Data = $.map(data.result.data, function (obj) {
    obj.id = '' + obj._id.$id; //small fix
    obj.text = obj.name;

    return obj;
});

select2 load data using ajax cannot select any option

2 Answers2

Linked