title: Selectize.js custom rendering with static html
body: <p>I am using the brilliant selectize.js library to generate an attractive select box with option groups. It is all working but I am stuck at the point that I cannot use the custom renderer from the examples page (Email contacts) <a href="http://brianreavis.github.io/selectize.js/">http://brianreavis.github.io/selectize.js/</a> because "item" does not know of the "email" attribute. I know how to do this in javascript, but how could I define the two attributes in static html?</p>
  
  <p>In js, this woulde be</p>
  
  <pre><code>$('#id').selectize({
    ...
    options: [
      { name: "Martin", email: "martin@asdf.at" }
    ],
    ....
  }
  </code></pre>
  
  <p>I tried the following:</p>
  
  <pre><code>&lt;select&gt;
    &lt;option value="Martin|martin@asdf.at" data-name="Martin" data-email="martin@asdf.at"&gt;
      Martin
    &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>But this is not working... Finally the render function taken from the examples:</p>
  
  <pre><code>render: {
      item: function(item, escape) {
          return '&lt;div&gt;' +
              (item.name ? '&lt;span class="name"&gt;' + escape(item.name) + '&lt;/span&gt;' : '') +
              (item.email ? '&lt;span class="email"&gt;' + escape(item.email) + '&lt;/span&gt;' : '') +
          '&lt;/div&gt;';
      },
      option: function(item, escape) {
          var label = item.name || item.email;
          var caption = item.name ? item.email : null;
          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 would be thankful for any hints!</p>
  
  <p>Regards,
  Martin</p>