CODEWITHSUNDEEP
angularjsangular-uiangularjs-select2
user3428228
user3428228

Reputation: 131

Multiple select2 angularUI load remote data

I have an issue with loading remote data in multiple select2. My code is

    var fetchGroups = function (queryParams) { 
    console.log(JSON.stringify(queryParams));
    return $http.get("https://******/****/***/" + queryParams.data.query).then(queryParams.success); 
}; 

$scope.groupSelectOptions= { 
    minimumInputLength: 3, 
    ajax: { 
        data: function (term, page) { 
            return { query: term }; 
        }, 
        quietMillis: 500, 
        transport: fetchGroups, 
        results: function (data, page) {
            console.log(data);
            // parse the results into the format expected by Select2 return { results: data };
            var drastics = data.data.result;
            if(drastics){
                var data = new Array();
                for(var i = 0; i < drastics.length; i++){
                    data.push(
                        {
                            id: drastics[i].id,
                            text: drastics[i].name
                        }
                    );
                }
            } else {
                data = data.data.result;
            }
            return { results: data };

        }
    }

};

It returns the values from the get request but when i select it returns undefined at the input box.

Upvotes: 3

Views: 949

Answers (1)

Vijay
Vijay

Reputation: 41

Just make sure you've included the 'data' property to the $scope.groupSelectOptions like so :

$scope.groupSelectOptions= { 
    minimumInputLength: 3, 
    ajax: { 
        data: function (term, page) { 
            return { query: term }; 
        },
      .....
    data:[]}

You should now see the term selected in the input field.

Upvotes: 1

Related Questions