无需Stimulus，如何实现Turbo Frame的重载？

完全可以用原生JS实现输入时重载Turbo Frame的实时搜索功能，不需要依赖Stimulus。下面是具体实现方案，同时解决你之前尝试的问题：

问题分析 #

你之前直接设置bands.src的方式失效，主要原因有三点：

• 用location.href拼接URL容易引入多余参数或路径错误，应该直接使用Rails生成的正确路由
• 未对输入值做URL编码，特殊字符会破坏请求格式
• 缺少防抖逻辑，会导致输入过程中频繁发起请求

实现方案 #

方案1：内联脚本（快速实现） #

修改表单的输入框，添加防抖处理的内联调用：

<%= form_with(url: bands_path, method: :get, data: {turbo_frame: "bands"}) do |form| %>
  <%= form.label :query, "Search by band name:", class: "block mb-2" %>
  <div class="flex space-x-3">
    <%= form.text_field :query, 
      class: "py-3 px-4 rounded border ring-0 focus:ring-4 focus:ring-orange-100 focus:shadow-none focus:border-orange-500 focus:outline-none",
      oninput: "debouncedSearch(this)" %>
    <%= form.submit 'Search', class: "px-4 py-3 font-medium bg-orange-300 text-neutral-900 rounded flex items-center cursor-pointer hover:bg-orange-400 focus:ring-4 ring-0 focus:ring-orange-100" %>
  </div>
<% end %>

然后在页面底部（或全局JS文件）添加防抖函数：

let searchTimeout;
function debouncedSearch(input) {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    const turboFrame = document.getElementById('bands');
    // 用Rails生成的路径拼接搜索参数，确保URL正确
    const baseUrl = '<%= j bands_path(query: "") %>';
    turboFrame.src = baseUrl.replace('query=', `query=${encodeURIComponent(input.value)}`);
  }, 200);
}

方案2：外部脚本（更整洁，适合复用） #

如果不想用内联代码，可在全局JS文件（比如application.js）中添加事件监听：

document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.querySelector('input[name="query"]');
  if (!searchInput) return;

  let searchTimeout;
  searchInput.addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
      const turboFrame = document.getElementById('bands');
      const params = new URLSearchParams();
      params.append('query', this.value);
      // 直接使用Rails生成的路由基础路径
      turboFrame.src = '<%= j bands_path %>?' + params.toString();
    }, 200);
  });
});

对应的输入框无需添加内联事件：

<%= form.text_field :query, 
  class: "py-3 px-4 rounded border ring-0 focus:ring-4 focus:ring-orange-100 focus:shadow-none focus:border-orange-500 focus:outline-none" %>

关键注意事项 #

1. 确保后端bands#index动作正确处理params[:query]，过滤出匹配的乐队数据
2. Turbo Frame的ID必须为bands，与JS中获取的元素ID一致
3. 使用encodeURIComponent编码输入值，避免特殊字符导致的URL错误
4. 防抖时间（200ms）可根据需求调整，平衡实时性和请求频率

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