TurboFrame与Stimulus搜索表单无法执行搜索的排查求助

先揪出代码里的几个明显问题 #

1. 后端根本没做搜索过滤
   你的concerts_controller.rb里，@concerts = Concert.all直接返回所有数据，完全没用到@query参数。哪怕表单提交成功，页面也不会显示筛选后的结果。得改成带过滤逻辑的代码，比如：

   def index
     @query = params[:query].presence
     @concerts = if @query
                   # 这里根据你的模型字段调整查询逻辑，避免SQL注入
                   Concert.where("name ILIKE ? OR genre_tags ILIKE ?", "%#{@query}%", "%#{@query}%")
                 else
                   Concert.all
                 end
   end
   

2. 搜索结果没绑定到Turbo Frame
   你只写了_search_result.html.erb局部视图，但concerts/index.html.erb里没把@concerts渲染到search-results这个Turbo Frame里。必须在index视图里加这段：

   <%= turbo_frame_tag "search-results" do %>
     <% @concerts.each do |concert| %>
       <%= render "search_result", concert: concert, query: @query %>
     <% end %>
   <% end %>
   

   不然Turbo更新Frame后是空内容，等于白提交。

3. Stimulus事件绑定的小隐患
   表单用input->search#submit会导致每输入一个字符就触发一次请求，虽然不是当前无响应的原因，但体验极差，后续建议加防抖处理。

逐步排查步骤（按优先级来） #

• 先确认Stimulus控制器有没有生效
  打开浏览器控制台，输入Stimulus.controllers，看输出里有没有search控制器的实例。如果没有：

  • 重启bin/dev确保esbuild编译了最新的控制器代码
  • 检查index.js里的注册代码有没有拼写错误（比如控制器类名、注册名称）

• 验证表单事件能不能触发
  在浏览器开发者工具的Elements面板，找到搜索输入框的父表单，确认它有data-action="input->search#submit"和data-search-target="form"属性。然后手动在控制台调用：

  document.querySelector('[data-search-target="form"]').requestSubmit()
  

  看Network面板有没有发起GET请求到concerts路径。

• 检查Turbo Frame是否存在
  确认页面上有<turbo-frame id="search-results">元素，表单的data-turbo-frame="search-results"是不是正确指向它的ID。

• 看网络请求的响应内容
  如果输入时Network面板有请求，点进去看响应HTML里有没有包含筛选后的演唱会结果。如果响应还是全量数据，说明后端过滤逻辑没写对；如果响应是正确的结果但页面没更，说明Turbo Frame的渲染有问题。

• 检查局部视图的变量传递
  _search_result.html.erb里用了query变量，渲染时必须确保传递了这个变量（比如render "search_result", concert: concert, query: @query），不然会报错，但你说控制台没报错，大概率是这一步没触发。

可选优化：给Stimulus加防抖 #

频繁触发请求太浪费资源，修改search_controller.ts加个300ms延迟：

import { Controller } from "@hotwired/stimulus"
import "form-request-submit-polyfill"

export default class SearchController extends Controller {
  static targets = ["form", "input"]
  formTarget: HTMLFormElement
  inputTarget: HTMLInputElement
  debounceTimer?: number

  connect() {
    this.inputTarget.addEventListener("input", () => this.debouncedSubmit())
  }

  debouncedSubmit() {
    clearTimeout(this.debounceTimer)
    this.debounceTimer = setTimeout(() => {
      this.formTarget.requestSubmit()
    }, 300)
  }
}

记得把表单上的data-action="input->search#submit"删掉，避免重复绑定。

内容的提问来源于stack exchange，提问作者Dan Rubio