我正在尝试在我的Rails 7应用程序上创建一个按类型搜索框。键入输入搜索工作，并且它在涡轮框架中加载，但是js驱动的按类型搜索功能被破坏了。搜索框的事件监听器根本没有触发…当我选择框并键入时，浏览器的网络选项卡或JS控制台中没有显示任何内容。
这是搜索表单partial:
<div>
<%= search_form_for @q, data: { controller: "form-submission", turbo_frame: "companies", turbo_action: "advance" } do |f| %>
<%= f.search_field :search_multi, placeholder: "Search", class: "form-control search-box", data: { action: "input->form-submission#search" } %>
<% end %>
</div>
app/javascript/控制器/form_submission_controller.js:
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
search() {
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
this.element.requestSubmit()
}, 200)
}
}
app/javascript/控制器/index.js:
// Import and register all your controllers from the importmap under controllers/*
import { application } from "controllers/application"
// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
// lazyLoadControllersFrom("controllers", application)
配置/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
我试过Chrome和Safari。
我用下面的代码重新构建了我的Rails应用程序安装，然后复制了我所有的代码:rails new app --database=postgresql --asset-pipeline=sprockets --javascript=importmap
在JS控制台上:getEventListeners($("#q_search_multi"))显示nothing.
我也试过bin/rails assets:clobber && bin/rails assets:precompile。
今天我从头开始重建应用程序并确定了原因:我在app/app/views/layouts/application.html.erb中缺少<%= javascript_importmap_tags %>。叹气吸取教训。下面是完整的application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%# turbo_include_tags %>
<%= javascript_importmap_tags %>
</head>
<body>
<main class="container">
<%= yield %>
</main>
</body>
</html>
大声说出构建"按类型搜索"搜索框的指南:https://www.colby.so/posts/instant-search-with-rails-6-and-hotwire