如何在 RoR 中正确安装 select2（或 Chosen - 或者任何 JS？）？

Question

Rails 初学者：我玩过 Chosen，看到一些帖子说 Select2 是更好的选择。但是，无论我尝试使用哪一个，我总是运行陷入同样的错误。

我在 Gemfile 和运行捆绑安装中有其中之一，然后出现 gem（我可以运行捆绑信息）。

然后我尝试将 JS 包含到 app/javascript/packs/application.js 中，如下所示：

require ("select2")

或

require ("chosen-jquery")

无论我做什么 - 我的 JS 控制台显示

Cannot find module 'select2'

(或选择-jquery).

我确信这是一个超级愚蠢的疏忽。我疯狂地用谷歌搜索并在这里搜索但找不到任何东西（这可能更意味着这是一个愚蠢的 oversicht！:)

非常欢迎任何提示。我可能不明白所有这些 webpacker / JS 的东西是如何工作的。请注意，我能够通过 YARN 轻松自动完成（和 jquery），然后我实际上可以通过以下方式在 application.js（以及 application.scss 中的样式表）中需要轻松自动完成：

require("easy-autocomplete")

我不太明白为什么这个有效而其他的无效？

这是我的完整 app/javascript/packs/application.js（包括自动完成）：

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")
require("easy-autocomplete")

require("select2/dist/css/select2")


document.addEventListener("turbolinks:load", function() {
    var $input = $("[data-behaviour='autocomplete']")

    var options = {
        getValue: "name",
        url: function(phrase) {
            return "/search.json?q=" + phrase;
        },
        categories: [
            {
                listLocation: "movies",
                header: "<strong>Movies</strong>",
            },
            {
                listLocation: "actors",
                header: "<strong>Actors</strong>",
            },
            {
                listLocation: "actoraliases",
                header: "<strong>Actor Aliases</strong>",
            }
        ],
        list: {
            onChooseEvent: function() {
                var url = $input.getSelectedItemData().url
                $input.val("")
                Turbolinks.visit(url)
            }
        }
    }

    $input.easyAutocomplete(options)
})

document.addEventListener("turbolinks:load", function() {
    $('.selector').select2();
})

谢谢！

Answer 1

如果您正在使用 select-2-rails，这仅适用于 Rails 资产管道。

尝试通过 yarn 安装 select2（相对于 ruby gem）：

yarn install select2

在app/javascript/packs/application.js中：

require("select2/dist/css/select2")

$(".content-search").select2();

// Side Note: when I moved this to a Stimulus Controller `import Select2 from "select2"` was needed.

在app/views/foos/_form.html.erb中：

<%= form.label :foo_id %>
<%= form.collection_select(:foo_id, Foo.all, :id, :name, { include_blank: true }, class: "content-search") %>

如何在 RoR 中正确安装 select2（或 Chosen - 或者任何 JS？）？

How to properly install select2 (or Chosen - or maybe ANY JS?) in RoR?

javascript

ruby-on-rails-6