title: remote data: result object with different attributes. how to map?
body: <p>I am trying to use jquery-select2 but I return json objects which have a different structure.
  I do not have an <code>id</code> and a <code>text</code> property but <code>Code</code> and <code>Description</code>.</p>
  
  <pre><code>&lt;input type="hidden" id="select2Test" name="select2Test" value=""/&gt;
  </code></pre>
  
  <p>This an my json object:</p>
  
  <pre><code>[{"Code":"20900","Description":"LONDON"}]
  </code></pre>
  
  <p>I've found some sample code on the Internet (and read the docs) but I don't seem to be able to make it work.
  This is my javascript:</p>
  
  <pre><code>$("#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 ('&lt;div&gt;' + item.Code + ' - ' + item.Description + '&lt;/div&gt;'); },
      formatSelection: function (item) { return (item.Description); },
      escapeMarkup: function (m) { return m; }
  }).on("change", function () {
      var $this = $(this);
      alert($this.val());
  });
  </code></pre>
  
  <p>I've mapped my unique key here:</p>
  
  <pre><code>id: function (item) { return { id: item.Code }; },
  </code></pre>
  
  <p>formatted my result here:</p>
  
  <pre><code>formatResult: function (item) { return ('&lt;div&gt;' + item.Code + ' - ' + item.Description + '&lt;/div&gt;'); },
  </code></pre>
  
  <p>and set the selection here:</p>
  
  <pre><code>formatSelection: function (item) { return (item.Description); },
  </code></pre>
  
  <p>so far so good. everything seems to work, except when I try to read or post the value I just get an strange result: <code>[object Object]</code>.
  I guess it has something to do with the results function:</p>
  
  <pre><code>results: function (data, page) {
      return { results: data };
  }
  </code></pre>
  
  <p>but I am not 100% sure.</p>
  
  <p><strong>PS: if I change my returned json object using id and text everything works fine but I can't do that cause other parts of my code use a different reference.</strong></p>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've found a solution mapping the data object:</p>
  
  <pre><code>results: function (data, page) { 
      return {
          results: $.map(data, function (item) {
              return {
             id: item.Code,
             text: item.Description
              };
          })
      };
  }
  </code></pre>
  
  <p>with this changes I don't need to set the id property:</p>
  
  <pre><code>// id: function (item) { return { id: item.Code }; },
  </code></pre>
  
  <p>and <code>formatResult</code> and <code>formatSelection</code></p>
  
  <pre><code>formatResult: function (item) { return ('&lt;div&gt;' + item.id + ' - ' + item.text + '&lt;/div&gt;'); },
  formatSelection: function (item) { return (item.text); },
  </code></pre>
  
  <p>don't need to be changed.</p>
  
  <p>I am wondering if this is the best option.</p>