4

我正在尝试使用 jquery-select2 但我返回具有不同结构的 json 对象。我没有idandtext属性但是Codeand Description。

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

这是我的 json 对象：

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

我在 Internet 上找到了一些示例代码（并阅读了文档），但我似乎无法使其工作。这是我的 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 };
}

但我不是 100% 确定。

PS：如果我使用 id 和 text 更改返回的 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); },

不需要改变。

我想知道这是否是最好的选择。

4

3 回答 3

2

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

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

不需要改变。

于 2013-05-20T09:15:44.223 回答
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中找到了答案

希望这可以帮助 ：）

于 2015-06-04T06:54:44.183 回答
0

我不太了解您的问题，但是如果您需要将对象映射到 select 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) };
}

可以试试吗，我没测试过。

于 2013-05-16T14:51:09.260 回答