title: populate jquery select2 with original value
body: <p>I am using the select2 plugin as an autocomplete for a text box. The autocomplete makes an ajax call to an employee view in a database. Everything is working great except when the user opens the webform to edit a record. I need the select2 control to load the value originally saved with the record regardless of whether it exists in the list or not. When I open the edit form, the select2 control is blank. I know I can probably load the value if it is in the json data return from the ajax call, but what if it's not? I can see the value in the initSelection but I don't know how to set the controls text/value to it. </p>
  
  <p>Long story short, the view I am making the ajax call to may or may not have the original employee value in it. For example, if an employee was originally selected from the view but left for another branch/agency, the view would no longer show them. I still need to display the original value in the control.  Hope that makes sense. Here is what I have for code. I can see the original value in the initSelection but don't know how to get it in the control:</p>
  
  <pre><code>    var URL = '@Url.Action("GetEmployees", "AssetAssignment")';
      var originalValue = "";
  
      $('#AssignedTo').select2({
          placeholder: "Type an MJB employee name or county...",
          minimumInputLength: 3,
          ajax: {
              url: URL,
              dataType: 'json',
              type: "GET",
              quietMillis: 50,
              data: function (term) {
                  return { term: term };
              },
              results: function (data) {
                  return { results: data.data };
              }
          },
          id: function (object) {
              // store the text vs the id
              return object.text;
          },       
          createSearchChoice: function (term, data) {
              //Allow manually entered text in drop down.
              if ( $(data).filter( function() {
                return this.text.localeCompare(term)===0;
              }).length===0) {
                  return { id: "", text: term, county: "" };
              }
          },
          initSelection: function (element, callback) {
              var id = $(element).val();
              if (id !== "") {
                  //var id = element.val();
                  //var text = element.data('option');
                  //var data = { id: id, text: text };
                  //callback(data);
                  //alert(JSON.stringify(data))
                  originalValue = id;
              }
          },
          formatResult: employeeFormatResult,
          formatSelection: employeeFormatSelection
      });
  
      // get other values from the selected item and put them in the appropriate controls
      $('#AssignedTo').change(function () {
          var id = $('#AssignedTo').select2('data').id;
          var county = $('#AssignedTo').select2('data').county;
          $('#AssignedToEmployeeId').val(id);
          $('#AssignedToEmployeeCounty').val(county);
      });
  
  });
  
  function employeeFormatResult(data) {
      var markup = "&lt;table class='select2-result'&gt;&lt;tr&gt;";
      markup += "&lt;td class='select2-result-id'&gt;" + $.trim(data.id) + "&lt;/td&gt;";
      markup += "&lt;td class='select2-result-text'&gt;" + data.text + "&lt;/td&gt;";
      markup += "&lt;td class='select2-result-county'&gt;" + data.county + "&lt;/td&gt;";
      markup += "&lt;/tr&gt;&lt;/table&gt;";
      return markup;
  }
  
  function employeeFormatSelection(data) {
      return data.text;
  }
  </code></pre>