javascript - Select2 在使用 select2 ajax 时不允许选择值

Question

我正在尝试使用 select2-AJAX 将 select2 用于 angularJS 中的远程数据，当我在 http://ivaynberg.github.io/select2/ 上使用给出的示例时它工作正常，但是当我使用自己的代码时，它不允许我选择值。

$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'];
}

};

在 Chrome 开发工具中，select2

有一个类“select2-result-unselectable”，它不允许我选择值。

Answer 1

你只是将 id 函数放在你的 ajax 调用中，而它应该作为键放在 select2Options 上下文中......

$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'];
        }