Expression editor test

by peteorpeter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.min.js"></script>
<p>Expression value: <span id='value'></span></p>

<select multiple id="e1" style="width:500px">
  <optgroup label="Fields">
    <option value="bn1">TCO</option>
    <option value="bn2">Criticality</option>
    <option value="bn3">Downtime Hours per Year</option>
    <option value="bn4">Cost Of Development</option>
    <option value="bn5">Projected ROI</option>
    <option value="bn6">Actual ROI</option>
  </optgroup>
  <optgroup label="Operators">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </optgroup>
    <optgroup label="Other">
    <option value="(">(</option>
    <option value=")">)</option>
  </optgroup>
</select>

JavaScript

var $select = $("#e1")
  .selectize({
    delimiter: "|",
    plugins: ['drag_drop', 'optgroup_columns'],
    persist: false,
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  }).on('change', function() {
    if ($(this).val()) {
      $('#value').text($(this).val().join(' '));
    }
  })
  
  
var instance = $select[0].selectize;  
var originalOptions = _.cloneDeep(instance.options);
var originalOptgroups = _.cloneDeep(instance.optgroups);
instance.on('item_add', function(value, $item){
  	console.log(value, $item, instance);
    instance.options = originalOptions;
    instance.optgroups = originalOptgroups;
    instance.refreshOptions();
});