我正试图在我的rails 7应用程序上创建一个边输入边搜索的搜索框.输入-点击-输入搜索是有效的,它加载在一个加速帧中,但是js驱动的边输入边搜索功能被打破了.搜索框的事件侦听器根本没有触发...当我 Select 该框并键入时,浏览器的网络选项卡或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/controllers/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/Controlors/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)
配置/导入映射.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"))
不显示任何内容.
我也试了bin/rails assets:clobber && bin/rails assets:precompile
次.