Rails Hotwire：如何在现有表单内实现搜索筛选功能？

核心问题定位 #

HTML规范不允许表单嵌套，你当前把搜索表单嵌套在主cardrequest表单内，浏览器会自动拆解这两个表单，导致搜索表单的提交逻辑完全失效，这是根本原因。下面提供两种解决方案：

方案一：修复现有后端筛选逻辑（保留Turbo Frame） #

1. 移除嵌套表单结构 #

把搜索区域改成独立模块，不再嵌套在主表单内：

<%= form_with(model: cardrequest, id: dom_id(cardrequest), class: "contents") do |form| %>
  <!-- 主表单字段 -->
  form fields for cardrequest ...

  <!-- 独立搜索区域 -->
  <div class="mb-4 space-y-4">
    <label for="add-guests">Select Cardholder Groups</label>
    <div class="relative">
      <%= search_tag :search, params[:search], data: { controller: "search-form", search_form_target: "input" } %>
    </div>
  </div>

  <div data-controller="checkbox-select-all">
    <label>     
      <input type="checkbox" data-checkbox-select-all-target="checkboxAll" />
      <span class="btn_primary_small">Select All / Deselect All</span>
    </label>
    <%= turbo_frame_tag "cgs" do %>
      <div class="space-y-3">
        <%= form.collection_check_boxes :cardholdergroup_ids, @cardholdergroups || current_user.cardholdergroups, :id, :friendlyname do |g| %>
          <div class="flex items-center mr-4">
            <%= g.check_box data: { checkbox_select_all_target: 'checkbox' } %>
            <%= g.label %>
          </div>
        <% end %>
      </div>
    <% end %>
  </div>

<% end %>

2. 修改Stimulus控制器，用Fetch更新Turbo Frame #

不再提交表单，直接通过Fetch请求更新Turbo Frame内容：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "input" ]

  search() {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      const searchTerm = this.inputTarget.value
      const turboFrame = document.getElementById('cgs')
      
      fetch(`/cardrequests/search?search=${encodeURIComponent(searchTerm)}`, {
        headers: { 'Accept': 'text/html' }
      })
      .then(response => response.text())
      .then(html => {
        turboFrame.innerHTML = html
      })
    }, 200)
  }
}

3. 完善后端与Partial #

创建app/views/cardrequests/_cgs.html.erb partial：

<div class="space-y-3">
  <%= form.collection_check_boxes :cardholdergroup_ids, cardholdergroups, :id, :friendlyname do |g| %>
    <div class="flex items-center mr-4">
      <%= g.check_box data: { checkbox_select_all_target: 'checkbox' } %>
      <%= g.label %>
    </div>
  <% end %>
</div>

更新控制器的search方法：

def search
  cardholdergroups = current_user.cardholdergroups
  cardholdergroups = cardholdergroups.where("friendlyname LIKE ?", "%#{params[:search]}%") if params[:search].present?
  render partial: 'cgs', locals: { cardholdergroups: cardholdergroups, form: @form }
end

方案二：前端本地筛选（更流畅，适合数据量小的场景） #

如果用户管理的用户组数量不多，直接在前端完成筛选，无需后端请求：

1. 调整视图，给组项添加标识 #

<%= form_with(model: cardrequest, id: dom_id(cardrequest), class: "contents") do |form| %>
  <!-- 主表单字段 -->
  form fields for cardrequest ...

  <div class="mb-4 space-y-4">
    <label for="add-guests">Select Cardholder Groups</label>
    <div class="relative">
      <%= search_tag :search, params[:search], data: { controller: "search-form", search_form_target: "input" } %>
    </div>
  </div>

  <div data-controller="checkbox-select-all">
    <label>     
      <input type="checkbox" data-checkbox-select-all-target="checkboxAll" />
      <span class="btn_primary_small">Select All / Deselect All</span>
    </label>
    <div class="space-y-3">
      <%= form.collection_check_boxes :cardholdergroup_ids, current_user.cardholdergroups, :id, :friendlyname do |g| %>
        <div class="flex items-center mr-4 group-item" data-name="<%= g.object.friendlyname.downcase %>">
          <%= g.check_box data: { checkbox_select_all_target: 'checkbox' } %>
          <%= g.label %>
        </div>
      <% end %>
    </div>
  </div>

<% end %>

2. 编写前端筛选控制器 #

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "input" ]

  search() {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      const searchTerm = this.inputTarget.value.trim().toLowerCase()
      const groupItems = document.querySelectorAll('.group-item')
      
      groupItems.forEach(item => {
        const name = item.dataset.name
        item.style.display = searchTerm === '' || name.includes(searchTerm) ? 'flex' : 'none'
      })
    }, 200)
  }
}

注意事项 #

• 永远不要嵌套表单，这是HTML规范明确禁止的行为，会导致浏览器自动修正DOM结构，引发逻辑混乱。
• 组数量较多（如超过100个）时优先选方案一，数量少则方案二更优，响应速度更快。

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