web-dev-qa-db-ja.com

Select2では、「テキスト」キーの名前を別の名前に変更できますか？

次のSelect2構成があります。

$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
                        };
                    }
            )};
        }
    }
};

これにより、select2コントロールに適切にデータを入力できます。

ただし、タグを含むフォーム全体を（とりわけ）投稿するためにAjaxを使用すると、問題が発生します。サーバーに送信されるjson配列には、idという名前の2つのプロパティを持つオブジェクトが含まれます。およびtext一方、サーバーにはidおよびdescriptionが必要です。

私のjsonからのスニペットを参照してください：

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

Select2では、textの名前を別の名前に変更できますか？

jsonjquery-select2angularjs-select2
16
balteo

私のjsを次のように変更すると、問題がソートされました。

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
                        };
                    }
            )};
        }
    }
};

注意：Select2トップレベル属性dataを使用する必要があります。

16
balteo

これは、ui-select2でカスタムIDとテキストプロパティを使用するために必要な構成の最低限のものです。

$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; }
}
6
parliament

Select2では、オプションに表示する必要のあるテキストをtextプロパティに保存する必要があります。次のJavaScriptを使用して、既存のプロパティからこのプロパティをマップできます。

var data = $.map(yourArrayData, function (obj) {
  obj.text = obj.text || obj.name; // replace name with the property used for the text
  obj.id = obj.id || obj.pk; // replace pk with your identifier
  return obj;
});

ドキュメント

1
Abderrahman Elfannir