title: Selectize Refresh items dynamically with custom rendering
body: <p>If you have created custom render functionality on your selectize dropdown, is it possible to refresh the dropdown items dynamically using ajax? I can do one or the other, but when I combine both parts of the functionality, the selectize dropdown items do not re-render.</p>
  
  <p>I have used the callback function to set the new list of options.</p>
  
  <p>The selectize control is initialized with the following javascript code when the page loads.</p>
  
  <pre class="lang-js prettyprint-override"><code>var $select = $(item).selectize({
    create: false,
    sortField: 'text',
    selectOnTab: true,
    valueField: 'id',
    labelField: 'text',
    searchFields: ['text'],
    render: {
      item: function(selectItem, escape) {
        var splitAt = selectItem.text.indexOf(';');
        var label;
        var caption = '';
        if (splitAt &gt; 0) {
          label = selectItem.text.substring(0, splitAt);
          caption = selectItem.text.substring(splitAt + 1);
        } else {
          label = selectItem.text;
        }
  
        return '&lt;div&gt;' +
          (label ? '&lt;span class="text"&gt;' + escape(label) + '&lt;/span&gt;' : '') +
          (caption ? '&lt;span class="description"&gt;' + escape(caption) + '&lt;/span&gt;' : '') +
          '&lt;/div&gt;';
      },
      option: function(selectItem, escape) {
        var splitAt = selectItem.text.indexOf(';');
        var label;
        var caption = '';
        if (splitAt &gt; 0) {
          label = selectItem.text.substring(0, splitAt);
          caption = selectItem.text.substring(splitAt + 1);
        } else {
          label = selectItem.text;
        }
  
        return '&lt;div&gt;' +
          '&lt;span class="label"&gt;' + escape(label) + '&lt;/span&gt;' +
          (caption ? '&lt;span class="caption"&gt;' + escape(caption) + '&lt;/span&gt;' : '') +
          '&lt;/div&gt;';
      }
    }
  });
  </code></pre>
  
  
  
  <p>I then have an ajax method that requests the latest drop down options and attempts to update the selectize control:</p>
  
  <pre class="lang-js prettyprint-override"><code>var refreshSuppliers = function() {
      $.getJSON('url/suppliers', function(results) {
        if (results) {
          var selectOptions = [];
          for (var index = 0, length = results.length; index &lt; length; index++) {
            var item = results[index];
            selectOptions.push({
              text: item.Option,
              value: item.Id.toString()
            });
          }
  
          var selectize = $("#Supplier")[0].selectize;
          selectize.clear();
          selectize.clearOptions();
          selectize.load(function(callback) {
            callback(selectOptions);
          });
        }
      })
  </code></pre>
  
  
  
  <p>Once the method runs, the dropdown on the web page is empty. If I remove all the custom rendering and treat as a simple selectize drop down, the ajax call to update the drop down works.</p>
  
  <p>Is there a way for these two features to work together?</p>