我正试图在我的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次.

推荐答案

今天,我从头开始重新构建了应用程序,并确定了原因:我在app/app/view/layout/applation.html.erb中丢失了<%= javascript_importmap_tags %>个.sigh学到的一课.下面是完整的应用程序.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

Ruby-on-rails相关问答推荐

如何在嵌套路由中使用Ruby on rails多态关联

RubyOnRail在测试环境中启动失败

Rails 7 - 富文本不显示附加的媒体内容

如何使用 activerecord activerecord-session_store 在 Rails 应用程序中使用 cookie 值在数据库中查找会话记录

Rails - Comment.count没有改变1

Rails 'includes' 和 'where' 与 belongs_to 和 has_many 关联

在 Ruby on Rails html.erb 文件中循环

如何使用 Rails 3 / Rack 在没有 www 的情况下重定向?

rails select标签,预先 Select 了多个值

Rails 4.1 Mailer 预览和设计自定义邮箱

twitter bootstrap下拉突然不起作用

如何将自定义路由添加到资源路由

在 ruby​​ 中构建公钥时,是什么导致既不是 PUB key 也不是 PRIV key::nested asn1 错误?

Rails 中是否有 HTML 安全截断方法?

Rails 3 SSL 路由从 https 重定向到 http

在 Rails 应用程序中处理大文件上传的最佳方法是什么?

默认呈现 JSON 而不是 HTML?

强参数需要多个

在范围内传递参数

如何从 ApplicationHelper 调用 ApplicationController 方法