How Do I Use Selectize in Rails 6

Hi there, I really love the selectize tutorial and would love to use it in a rails 6 application. What changes do I need to make to the tutorial.

can i just change

//= require selectize

to

$ yarn add selectize

Do I need to add Selectize to my environment.js like i would jquery

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
        selectize: '?'
  })
)

And or Require selectize in application.js file.
require('selectize')

Hi @Jeremy, the following implementation works well for me in Rails 6:

yarn add selectize

app/assets/stylesheets/application.scss:

@import "selectize/dist/css/selectize";
@import "selectize/dist/css/selectize.default";

javascript/packs/application.js

require("selectize")
require("packs/language")

javascript/packs/language.js (code from video)

$(document).on("turbolinks:load", function() {
    var selectizeCallback = null;

    $(".language-modal").on("hide.bs.modal", function(e) {
        if (selectizeCallback != null) {
            selectizeCallback();
            selectizeCallback = null;
        }

        $("#new_language").trigger("reset");
        $.rails.enableFormElements($("#new_language"));
    });

    $("#new_language").on("submit", function(e) {
        e.preventDefault();
        $.ajax({
            method: "POST",
            url: $(this).attr("action"),
            data: $(this).serialize(),
            success: function(response) {
                selectizeCallback({value: response.id, text: response.name});
                selectizeCallback = null;

                $(".language-modal").modal('toggle');
            }
        });
    });

    $(".selectize").selectize({
        create: function(input, callback) {
            selectizeCallback = callback;

            $(".language-modal").modal();
            $("#language_name").val(input);
        }
    });
});

and finally the view on edit.html.erb

          <%= f.select :language_ids, Language.all.pluck(:name, :id), {}, { multiple: true, class: "selectize" } %>

                    <div class="modal fade language-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="mySmallModalLabel">Add Language</h4>
      </div>
      <div class="modal-body">
        <%= form_for Language.new do |f| %>
          <div class="form-group">
            <%= f.label :name %>
            <%= f.text_field :name, class: "form-control" %>
          </div>
          <div class="form-group">
            <%= f.submit class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

That's it - hope it helps. Cheers

Thank you for that answer.

I would like to use TailwindCSS, instead of Bootstrap. What changes should I make to this code? or would that code work without Bootstrap installed. Currently I try to work it out and I get an error.

submissions.js:33 Uncaught TypeError: $(...).modal is not a function
at Selectize.create (submissions.js:33)
at Selectize.createItem (selectize.js:2196)
at Selectize.onOptionSelect (selectize.js:1235)
at HTMLDivElement. (selectize.js:687)
at HTMLDivElement.dispatch (jquery.js:4658)
at HTMLDivElement.elemData.handle (jquery.js:4478)
create @ submissions.js:33
createItem @ selectize.js:2196
onOptionSelect @ selectize.js:1235
(anonymous) @ selectize.js:687
dispatch @ jquery.js:4658
elemData.handle @ jquery.js:4478

The error is for this portion of code:

$(".selectize").selectize({
create: function(input, callback) {
selectizeCallback = callback;

        $(".tag-modal").modal();
        $("#tag_name").val(input);
    }
});