Question

我正在尝试使用jquery-select2但是我返回了具有不同结构的json对象。我没有id和text属性，只有Code和Description。

<input type="hidden" id="select2Test" name="select2Test" value=""/>

这是我的json对象：

[{"Code":"20900","Description":"LONDON"}]

我在互联网上找到了一些示例代码（并阅读了文档），但我似乎无法使其工作。这是我的javascript：

$("#select2Test").select2({
    placeholder: "Search City",
    minimumInputLength: 2,
    multiple: false,
    quietMillis: 5000,
    id: function (item) { return { id: item.Code }; },
    ajax: {
        url: '/Services/FetchCities',
        dataType: 'json',
        type: "POST",
        data: function (term, page) { return { city: term }; },
        results: function (data, page) {
           return { results: data };
        }
    },
    // initSelection: function (item, callback) {
    //     var data = { id: item.Code(), text: item.Description() };
    //     callback(data);
    // },
    formatResult: function (item) { return ('<div>' + item.Code + ' - ' + item.Description + '</div>'); },
    formatSelection: function (item) { return (item.Description); },
    escapeMarkup: function (m) { return m; }
}).on("change", function () {
    var $this = $(this);
    alert($this.val());
});

我在这里映射了我的唯一键：

id: function (item) { return { id: item.Code }; },

在此处格式化我的结果：

formatResult: function (item) { return ('<div>' + item.Code + ' - ' + item.Description + '</div>'); },

并在此处设置选择：

formatSelection: function (item) { return (item.Description); },

到目前为止一切顺利。一切似乎都有效，除非我尝试阅读或发布价值，我得到一个奇怪的结果：[object Object]。我想这与结果函数有关：

results: function (data, page) {
    return { results: data };
}

但我不是百分百肯定。

PS：如果我使用id和文本更改我返回的json对象，一切正常，但我不能这样做，因为我的代码的其他部分使用不同的引用。

任何帮助都将不胜感激。

更新

我找到了一个映射数据对象的解决方案：

results: function (data, page) { 
    return {
        results: $.map(data, function (item) {
            return {
           id: item.Code,
           text: item.Description
            };
        })
    };
}

通过此更改，我不需要设置id属性：

// id: function (item) { return { id: item.Code }; },

和formatResult以及formatSelection

formatResult: function (item) { return ('<div>' + item.id + ' - ' + item.text + '</div>'); },
formatSelection: function (item) { return (item.text); },

不需要更改。

我想知道这是否是最佳选择。

Answer 1

我找到了一个映射数据对象的解决方案：

results: function (data, page) { 
    return {
        results: $.map(data, function (item) {
            return {
           id: item.Code,
           text: item.Description
            };
        })
    };
}

通过此更改，我不需要设置id属性：

// id: function (item) { return { id: item.Code }; },

和formatResult以及formatSelection

formatResult: function (item) { return ('<div>' + item.id + ' - ' + item.text + '</div>'); },
formatSelection: function (item) { return (item.text); },

不需要更改。

Answer 2

我也遇到过这个问题，这对最新的插件v4.0.0无效所以我做的是以下

... ,
processResults: function (data) {
    //where data._embedded.people is the array containing all my objects
    data = $.map(data._embedded.people, function (obj) {
            obj.id = obj.id || obj.ID;
            return obj;
    });

    return {
        results: data
    };
},
...

我在文档中找到了答案 https://select2.github.io/announcements-4.0.html#changed-id

希望这有助于：）

Answer 3

我不太了解你的问题，但如果您需要将对象映射到选择2兼容对象，我会说你可以这样做：

// Usage: select2Map({Code: '123', Description: 'asd'}) => { id: '123', text: 'asd' }
var select2Map = function(object){
  return {id: object.Code, text: object.Description};
}

并使用此功能：

results: function (data, page) {
  return { results: select2Map(data) };
}

你可以尝试一下，我还没有测试过。

远程数据：具有不同属性的结果对象。如何映射？

3 个答案: