Правильное использование обратного вызова jQuery select2 initSelection с удаленными данными

Я использую плагин jQuery select2 для извлечения почтовых индексов с помощью предоставленной функции обратного вызова ajax следующим образом:

$(document).ready(function() {
    $("#postcodes").select2({
        placeholder : "Search for a postcode",
        multiple : true,
        minimumInputLength : 3,
        ajax : {
            url : "/bignibou/utils/findGeolocationPostcodeByPostcodeStartingWith.json",
            dataType : 'json',
            data : function(term) {
                return {
                    postcode : term
                };
            },
            results : function(data) {
                console.log(data);
                return {
                    results : $.map(data, function(item) {
                        return {
                            id : item.id,
                            text : item.postcode
                        };
                    })
                };
            }
        }
    });
});

После выбора двух почтовых индексов я получаю результирующий hidden input в DOM:

<input type="hidden" class="bigdrop select2-offscreen" id="postcodes" style="width:600px" name="familyAdvertisement.postcodes" value="4797,4798" tabindex="-1">

Проблема заключается в том, что после того, как форма будет повторно отображена (например, в случае ошибки некоторых других элементов управления), выбор (т.е. два почтовых индекса и особенно text) не отображаются в форме хотя hidden input имеет два значения (т.е. 4797 и 4798, которые являются id для почтового индекса).

Я не уверен, что мне нужно сделать еще одну ajax в обе стороны, когда форма будет перерисована или если есть лучший способ пойти.

Кто-нибудь может посоветовать?

Ответ 1

Метод initSelection должен передать значения, которые должны присутствовать в select2

Пример:

$("#postcodes").select2({
    placeholder : "Search for a postcode",
    multiple : true,
    minimumInputLength : 1,
    data:[],
    initSelection : function (element, callback) {
        var data = [{id:1,text:'bug'},{id:2,text:'duplicate'}];
        callback(data);
    }
}).select2('val', ['1', '2']);

Демо: Fiddle