javascriptangularjsangularjs-select2

Select2 does not allow to select value while using select2 ajax


I am trying to use select2 for remote data in angularJS using select2-AJAX, it works fine when i use there given example on http://ivaynberg.github.io/select2/, but when I'm working with my own code, it does not allow me to select value.

$scope.select2Options = {
allowClear: true,
minimumInputLength: 3,

ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
    url: rootURL.tsURL + "valueSets/dy346:fhir.observation-codes/concepts/_fhir",
    dataType: 'json',
    quietMillis: 250,

    id: function(item) {
        console.log(item);
        return data.item['CodeableConcept.coding']['Coding.code'];
    },

    transport: function(params) {
        params.beforeSend = function(request) {
            request.setRequestHeader("Authorization", userService.tsConfig.headers.Authorization);
        };
        return $.ajax(params);
    },
    data: function(term, page) {
        return {
            criteria: term,
            matchType: "StartsWith",
            limit: "8",
            offset: "0"
        };
    },
    cache: true,

    results: function(data, page) { // parse the results into the format expected by Select2.
        // since we are using custom formatting functions we do not need to alter the remote JSON data

        var org = normalizeJSONLD.findAllObjectsByType(data['@graph'], "fhir:CodeableConcept");
        var object = normalizeJSONLD.normalizeLD(data['@graph'], org);

        return {
            results: object
        };
    }
},

formatResult: function(item) {
    console.log(item);
    return item['CodeableConcept.coding']['Coding.code'] + ": " + item['CodeableConcept.coding']['Coding.display'];
},
formatSelection: function(item) {
    return item['CodeableConcept.coding']['Coding.code'];
}

};

In Chrome Dev Tool, the select2

  • has a class "select2-result-unselectable" which does not allow me to select value.


  • Solution

  • You are only placing id function inside you ajax call, while it should be placed within the select2Options context as a key...

    $scope.select2Options = {
    allowClear: true,
    minimumInputLength: 3,
    
    ajax: { 
        url: rootURL.tsURL + "valueSets/dy346:fhir.observation-codes/concepts/_fhir",
        dataType: 'json',
        quietMillis: 250,
    
    transport: function(params) {
        params.beforeSend = function(request) {
            request.setRequestHeader("Authorization", userService.tsConfig.headers.Authorization);
        };
        return $.ajax(params);
    },
    data: function(term, page) {
        return {
            criteria: term,
            matchType: "StartsWith",
            limit: "8",
            offset: "0"
        };
    },
    cache: true,
    
    results: function(data, page) { // parse the results into the format expected by Select2.
        // since we are using custom formatting functions we do not need to alter the remote JSON data
    
        var org = normalizeJSONLD.findAllObjectsByType(data['@graph'], "fhir:CodeableConcept");
        var object = normalizeJSONLD.normalizeLD(data['@graph'], org);
    
        return {
                results: object
            };
        }
    },
    formatResult: function(item) {
        console.log(item);
        return item['CodeableConcept.coding']['Coding.code'] + ": " + item['CodeableConcept.coding']['Coding.display'];
    },
    formatSelection: function(item) {
        return item['CodeableConcept.coding']['Coding.code'];
    },
    
    // id should be defined over here...
        id: function(item) {
                console.log(item);
                return data.item['CodeableConcept.coding']['Coding.code'];
            }