cdao-pjet/app/javascript/controllers/selectize_controller.js

import ApplicationController from './application_controller'

export default class extends ApplicationController {
  connect() {
    super.connect()
    var $this = this

    var default_opts = {
      plugins: ['restore_on_backspace', 'remove_button'],
      searchField: ['text', 'optgroup'],
      valueField: "id",
      allowEmptyOption: false,
      showEmptyOptionInDropdown: true,
      emptyOptionLabel: true,
      hideSelected: true,
      placeholder: "Please Select"
    }

    $(".default-selectize").selectize(default_opts)

    var $doctrine_content = $("#doctrineModal").find("input[name='content']")
    var $trix_content = $("#doctrineModal").find(".trix-content")

    var doctrine_content_suggestions_opts = {
      onChange: function (value) {
        if(value === null || value === undefined || value === "") {
          $doctrine_content.val("")
          $trix_content.val("")
        } else {
          $doctrine_content.val(value.text())
          $trix_content.val(value)
        }
      }
    };

    var subject_ids_opts = {
      onChange: function (value) {
        console.log(value)
        var selectize_options = []
        var $selectize = $("#doctrineModal").find("#doctine_content_suggestions").selectize($.extend({ options: selectize_options }, doctrine_content_suggestions_opts))

        if (value.length === 0) {
          console.log("Here!!!")
          $selectize[0].selectize.clearOptions();
        } else {
          $.get("/api/doctrines.json", { subject_ids: value }, function(data, status) {
            if (status === "success") {
              $.each(data, function (i, doctrine) {
                selectize_options.push({ id: doctrine.id, value: doctrine.content, text: doctrine.plain_content })
              })
  
              $selectize[0].selectize.addOption(selectize_options)
            }
          });
        }

        $selectize[0].selectize.refreshOptions()

        console.log(selectize_options)
      }
    };

    $(".subject-ids-selectize").selectize($.extend(subject_ids_opts, default_opts))
    $("#doctine_content_suggestions").selectize($.extend(doctrine_content_suggestions_opts, default_opts))
  }
}