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

Rails初学者：我已经和Selected打过交道，看到一些帖子认为Select2是更好的选择。然而，无论我尝试使用哪一个，我总是会遇到相同的错误

我在Gemfile中有一个，运行bundle安装，然后gem就出现了（我可以在上面运行bundle信息）

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

require ("select2")

或

无论我做什么-我的JS控制台上说

Cannot find module 'select2'

（或选择jquery）

我相信这是一个超级愚蠢的疏忽。我疯狂地在谷歌上搜索，但找不到任何东西（这可能意味着这是一个愚蠢的过度搜索！）

任何暗示都是非常受欢迎的。我可能不明白这些webpacker/JS是如何工作的。 请注意，顺便说一句，我可以通过Thread获得easy autocomplete（和jquery），然后我可以通过以下方式要求在application.js中使用easy autocomplete（以及application.scss中的样式表）：

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

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

从“@Rails/ujs”导入Rails
从“TurboLink”导入TurboLink
从“@rails/ActiveStorage”导入*作为ActiveStorage
导入“频道”
Rails.start（）
Turbolinks.start（）
ActiveStorage.start（）
require（“jquery”）
要求（“轻松自动完成”）
需要（“select2/dist/css/select2”）
document.addEventListener（“TurboLink:load”，函数（）{
var$input=$（“[data behavior='autocomplete']”）
变量选项={
getValue:“名称”，
url:函数（短语）{
return“/search.json？q=“+短语；
},
类别：[
{
listLocation:“电影”，
标题：“电影”，
},
{
listLocation:“演员”，
标题：“演员””，
},
{
listLocation:“Actoralises”，
标题：“演员别名””，
}
],
名单：{
onChooseEvent:function（）{
var url=$input.getSelectedItemData（）.url
$input.val（“”）
Turbolinks.visit（url）
}
}
}
$input.easyAutocomplete（选项）
})
document.addEventListener（“TurboLink:load”，函数（）{
$（'.selector'）。select2（）；
})

谢谢大家!

如果您使用的是Rails资产管道，那么它仅适用于Rails资产管道

尝试通过纱线（与ruby gem相反）安装

select2

：

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

require（“select2/dist/css/select2”）
$（“.content search”）。选择2（）；
//旁注：当我将其移动到刺激控制器时，需要从“Select2”导入Select2。

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

ok完美。我想我需要对“rails资产管道”有更多的了解，但是——现在非常清楚，我将通过Thread安装：）谢谢！嗯，我需要回到“完美”。。。。因为现在我在js控制台中收到一条错误消息，说“select2不是一个函数”…？确保安装了jquery？我可以运行$（）.jquery；在javascript控制台中，它返回3.6.0。。。所以我想一切都好吧？我还安装了另一个插件——easyAutocomplete——它工作得很好（还使用了一点jquery…）。我已经在上面的原始问题中发布了我的整个app/javascript/packs/application.js文件。我刚刚尝试手动调用select2-如：我删除了$（“.content search”）.select2（）行；从application.js加载表单页面，然后在控制台中手动键入$（“.content search”）。select2（）-工作正常！现在我真的很困惑。。。这可能是时间问题吗？

Cannot find module 'select2'

require("easy-autocomplete")

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();
})

yarn install select2