Passing Custom Headers to Ajax request on Select2

Question

We are trying to implement Ajax Remote data loading in Select2:-

 $scope.configPartSelect2 =  {
        minimumInputLength: 3,
        ajax: {
            ur         


        

Answer 1

I solved my above problem by supplying custom transport method.. Then I was stuck with Drop-down item not getting selected on mouse hover & drop-down item not being selected after click. After debugging I found proeprty "id" is must to have in returned json object.

Below is my code:-

    var fetchPart = function (queryParams) {

        var result = http.get(queryParams.url, queryParams.data).success(queryParams.success);

    result.abort = function() {
        return null;
    };
    return result;
};

var partFormatResult = function (part) {
    return "
" + part.PartNumber + "
"+ part.PartDescription + "
";
};

var partFormatSelection = function (part, container) {
    console.log(part.Id + "number - " + part.PartNumber);
    return part.PartNumber;
//    return part.PartNumber;
    //return part.Id;
};

$scope.configPartSelect2 =  {
    minimumInputLength: 3,
    ajax: {
        url: "/api/Part",
        data: function (term, page) {
            return { params: { isStockable: true, query: term, pageNo: page } };
        },
        transport: fetchPart,
        results: function (data, page) {
            console.log("result is called by select2");
            var more = (page * 10) <= data.length; // whether or not there are more results available
            return { results: data, more: more };
        }
    },
    formatResult: partFormatResult,
    formatSelection: partFormatSelection,
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
};