title: Loading values into Selectize.js
body: <p><Strong>Problem</strong></p>
  
  <p>I have a text input that I have selectized as tags which works fine for querying remote data, I can search and even create new items using it and that all works OK. </p>
  
  <p>Using selectize: </p>
  
  <pre><code>var $select = $('.authorsearch').selectize({
      valueField: 'AuthorId',
      labelField: 'AuthorName',
      searchField: ['AuthorName'],
      maxOptions: 10,
      create: function (input, callback) {
          $.ajax({
              url: '/Author/AjaxCreate',
              data: { 'AuthorName': input },
              type: 'POST',
              dataType: 'json',
              success: function (response) {
                  return callback(response);
              }
          });
      },
      render: {
          option: function (item, escape) {
              return '&lt;div&gt;' + escape(item.AuthorName) + '&lt;/div&gt;';
          }
      },
      load: function (query, callback) {
          if (!query.length) return callback();
          $.ajax({
              url: '/Author/SearchAuthorsByName/' + query,
              type: 'POST',
              dataType: 'json',
              data: {
                  maxresults: 10
              },
              error: function () {
                  callback();
              },
              success: function (res) {
                  callback(res);
              }
          });
      }
  });
  </code></pre>
  
  <p>The text box:</p>
  
  <pre><code>&lt;input class="authorsearch" id="Authors" name="Authors" type="text" value="" /&gt;
  </code></pre>
  
  <p>Examples:</p>
  
  <p><img src="https://i.stack.imgur.com/ddWyn.png" alt="Authors working"></p>
  
  <p>Then when I select one (in this case 'apple') it comes up in a badge as you'd expect, and the underlying value of the textbox is a comma separated list of the values of these items.</p>
  
  <p><img src="https://i.stack.imgur.com/xDrbq.png" alt="Author with badge"></p>
  
  <p><strong>Current Output</strong></p>
  
  <p>The problem is when I load a page and want values retrieved from the database to be displayed in the selectized text input as tags, it only loads the values and I can see no way of displaying the displayname instead.</p>
  
  <pre><code>&lt;input class="authorsearch" id="Authors" name="Authors" type="text" value="1,3,4" /&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/scte5.png" alt="Numbers only"></p>
  
  <p><strong>Desired Ouput</strong></p>
  
  <p>I have tried all sorts of values for the inputs value field to have it load the items as showing their displayname and not their values. Below is an example of a single object being returned as JSON, being able to load a JSON array of these as selectized tags would be ideal.</p>
  
  <pre><code>[{"AuthorId":1,"AuthorName":"Test Author"},
   {"AuthorId":3,"AuthorName":"Apple"},
   {"AuthorId":4,"AuthorName":"Test Author 2"}]
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/1yQS6.png" alt="enter image description here"></p>
  
  <p>How can I go about this? Do I need to form the value of the text box a particular way, or do I need to load my existing values using some javascript?</p>