L'utilisation correcte du rappel initSelection jQuery select2 avec des données à distance

Question

J'utilise le plugin jQuery Select2 afin de récupérer les codes postaux en utilisant la condition fonction de rappel ajax comme suit:

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

Une fois que deux codes postaux sont sélectionnés je suis le résultat hidden input en DOM:

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

la question que j'ai est qu'une fois que le formulaire est réaffichée (par exemple en cas de certaines autres mesures de contrôle dans l'erreur), les sélections (à savoir les deux codes postaux et en particulier le text) d n'apparaissent pas dans la forme bien que le hidden input ait les deux valeurs (c.-à-d. 4797 et 4798, qui sont les id s pour le code postal). Je ne suis pas sûr si je dois faire un autre voyage aller-retour d'ajax quand le formulaire est réaffiché ou s'il y a une meilleure manière d'aller.

Quelqu'un peut-il vous conseiller?

Answer 1

La méthode initSelection doit transmettre les valeurs qui doit être présent dans le select2

Ex:

$("#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']); 

Démo: Fiddle