title: Pre populate jquery token-input values
body: <p>In my page I am reading back the data stored in a table. I have two <code>textboxfor</code> in the page which is attached with jQuery input token plugin. Once the page is viewed the data is coming and plugin is get attached but once the plugin get attached the existing values inside the boxes are losing and it become blank. Still the plugin is working.</p>
  
  <pre><code>@if (Model != null)
  {
      for (int i = 0; i &lt; Model.provider_diagnosis_dtls.Count; i++)
      {
          &lt;tr&gt;
              &lt;td&gt;
                  @Html.TextBoxFor(m =&gt; m.provider_diagnosis_dtls[i].diagnosis_code, new { data_code = Json.Encode(new { id = Model.provider_diagnosis_dtls[i].diagnosis_code, name = Model.provider_diagnosis_dtls[i].diagnosis_code }), @class = "diag" })               
              &lt;/td&gt; 
              &lt;td&gt;
                  @Html.TextBoxFor(m =&gt; m.provider_diagnosis_dtls[i].diagnosis_desc, new { @class = "diag_desc" })
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.TextBoxFor(m =&gt; m.provider_diagnosis_dtls[i].diagnosis_level, new { @readonly = "readonly" })
              &lt;/td&gt;
          &lt;/tr&gt;
      }
  }
  
  $(document).ready(function () {
      $(".diag").tokenInput("@Url.Action("SearchDiagnosis","Preapproval")", {
          theme: 'facebook',
          preventDuplicates: true,
          searchingText: 'Searching diagnosis code...',
          tokenLimit: 1,
          hintText: 'Diagnosis Code'
      });
  });
  </code></pre>
  
  <p>What is the reason behind the code inside the text box is losing? Am I missing any particular code.</p>
  
  <pre><code>@Html.TextBoxFor(m=&gt; m.provider_diagnosis_dtls[i].diagnosis_code, new { data_code = Json.Encode( new { id = Model.provider_diagnosis_dtls[i].diagnosis_code, name = Model.provider_diagnosis_dtls[i].diagnosis_code }), @class = "diag" })
  </code></pre>
  
  <p>this is where I am trying to bring back the value for token input using <code>data_*</code> attribute of HTML5.</p>
  
  <p><strong>Edited</strong></p>
  
  <p>the input token has two attribute id,name. The name attribute is the display text and id value is the one which will pass to the controller during submit.
  So if id and name are same value it is working fine with below answer of.</p>
  
  <p>How to achieve the scenario if display value and the value to submit is different. ie. eg: text to shown is 'XYZ' but the while submiting the value to submit is '123'</p>