Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does Select2 allow for changing name of "text" key to something else?

I have the following Select2 configuration.

$scope.select2Options = {
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    ajax : {
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) {
            return  {
                language : term
            };
        },
        results : function(data, page) {
            return {
                results :
                    data.map(function(item) {
                        return {
                            id : item.id,
                            text : item.description
                        };
                    }
            )};
        }
    }
};

This allows me to populate the select2 control properly.

However, an issue occurs when I use Ajax in order to post the whole form containing the tags (amongst other): the json array sent to the server contains objects with two properties named id and text whereas the server would require id and description.

see snippet from my json:

"languages":[{"id":46,"text":"Français"},{"id":1,"text":"Anglais"}]

Does select2 allow for changing the name of the text to something else?

like image 582
balteo Avatar asked Oct 14 '13 10:10

balteo


People also ask

How do I create a Select2 dynamically?

Select2 jQuery plugin is easy to add on the <select > element. Need to call the select2() method on the selector to initialize. If you adding select2 on a class or select element and when you add an element dynamically then select2 is not initialized on that element.

What does Select2 () do?

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

How do I add options to Select2?

New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data.text, data.id, false, false); $('#mySelect2').append(newOption).trigger('change');


2 Answers

Changing my js to the following sorted the issue:

function format(item) { return item.description; };

$scope.select2Options = {   
    simple_tags: false,
    placeholder : "Search for a language",
    multiple : true,
    contentType: "application/json; charset=utf-8",
    minimumInputLength : 3,
    data:{ text: "description" },
    formatSelection: format,
    formatResult: format,
    ajax : {
        url : "/bignibou/utils/findLanguagesByLanguageStartingWith.json",
        dataType : 'json',
        data : function(term) {
            return  {
                language : term
            };
        },
        results : function(data, page) {
            return {
                results :
                    data.map(function(item) {
                        return {
                            id : item.id,
                            description : item.description
                        };
                    }
            )};
        }
    }
};

Notice: one has to use the Select2 top level attribute data.

like image 137
balteo Avatar answered Sep 28 '22 06:09

balteo


Here's the bare minium of the configuration neccesary to use a custom id and text properties on ui-select2

$scope.clients: {
  data: [{ ClientId: 1, ClientName: "ClientA" }, { ClientId: 2, ClientName: "ClientB" }],
  id: 'ClientId',
  formatSelection: function (item) { return item.ClientName; },
  formatResult: function (item) { return item.ClientName; }
}
like image 32
parliament Avatar answered Sep 28 '22 05:09

parliament