Selectize Uncaught SyntaxError: Unexpected token # in JSON at position 0 - ruby-on-rails-4

Question

I am trying to pass custom data attributes to my selectize component. Below is the static HTML generated which I wish to selectize:
<select id="colour-filter" data-reactid=".0.1.0.2.0.0.1.0">
<option value="" data-data="false" data-reactid=".0.1.0.2.0.0.1.0.$blank"></option>
<option value="2" data-data="#FFFFFF" data-reactid=".0.1.0.2.0.0.1.0.1:$2">White</option>
<option value="1" data-data="#FF0000" data-reactid=".0.1.0.2.0.0.1.0.1:$1">Red</option>
<option value="3" data-data="#C0C0C0" data-reactid=".0.1.0.2.0.0.1.0.1:$3">Silver</option>
<option value="4" data-data="#808080" data-reactid=".0.1.0.2.0.0.1.0.1:$4">Gray</option>
<option value="5" data-data="#800000" data-reactid=".0.1.0.2.0.0.1.0.1:$5">Maroon</option>
<option value="0" data-data="false" data-reactid=".0.1.0.2.0.0.1.0.$showAll">All colours</option>
</select>
But, I am getting the following error, when this piece of code (JSON.parse("#FFFFFF")) is executed inside selectize:
VM11923:1 Uncaught SyntaxError: Unexpected token # in JSON at position
0
Even if I remove the # from the data attribute, it doesn't work.
Why is selectize not able to generate the data JSON for this html? How do I work around instead?
This is jsfiddle - https://jsfiddle.net/gutzmnsw/

Answer 1

It worked well with the following HTML, though I wonder why do I have to send the JSON and sending just the attribute value for data-data won't work, and there is no mention in the documentation about this:
<select id="colour-filter" data-reactid=".0.1.0.2.0.0.1.0">
<option value="" data-reactid=".0.1.0.2.0.0.1.0.$blank"></option>
<option value="2" data-data="{"hex":"#FFFFFF"}" data-reactid=".0.1.0.2.0.0.1.0.1:$2">White</option>
<option value="1" data-data="{"hex":"#FF0000"}" data-reactid=".0.1.0.2.0.0.1.0.1:$1">Red</option>
<option value="3" data-data="{"hex":"#C0C0C0"}" data-reactid=".0.1.0.2.0.0.1.0.1:$3">Silver</option>
<option value="4" data-data="{"hex":"#808080"}" data-reactid=".0.1.0.2.0.0.1.0.1:$4">Gray</option>
<option value="5" data-data="{"hex":"#800000"}" data-reactid=".0.1.0.2.0.0.1.0.1:$5">Maroon</option>
<option value="0" data-reactid=".0.1.0.2.0.0.1.0.$showAll">All colours</option>
</select>
Selectized my component this way:
$('#colour-filter').selectize({
plugins: ['restore_on_backspace'],
persist: false,
allowEmptyOption: true,
selectOnTab: true,
render: {
option: (item, escape)->
if item.hex && item.hex == "#FFFFFF"
option_html = '<div>' + '<div style="background-color: ' + item.hex + ';border: 1px solid black"></div><span>' +
escape(item.text) + '</span>' + '</div>';
else if item.hex
option_html = '<div>' + '<div style="background-color: ' + item.hex + '"></div><span>' +
escape(item.text) + '</span>' + '</div>';
else
option_html = '<div>' + escape(item.text) + '</div>';
return option_html
},