Javascript 使用助手方法的Rails AJAX实时搜索

我正在尝试复制Spotify搜索，它会在每次按键时更新搜索结果。它目前的工作提交，但在按键，我得到了一个坏的请求错误在我的控制台。如何在按键时更新页面？一点背景信息：我在一个助手方法中使用rspotifgem，该方法在搜索条目时调用

static_controller.rb：

class StaticController < ApplicationController
  include ApplicationHelper

  def home
  end

  def search
    @search = user_search(params[:query])

    render :home

  end
end

home.html.erb：

<%= form_tag search_path, method: :get, :id => "search" do %>
    <%= text_field_tag :query %>
    <%= submit_tag 'Search' %>
<% end %>

<% if params.include?(:query) %>
    <div id="music"><%= render 'music' %></div>
<% end %>

<h1>Artists</h1>
<div class="ui cards">
    <% @search["artist"].each do |artist| %>
      <div class="card">
        <!-- Artist image should go here -->
        <div class="content">
          <a class="header"><%= artist.name %></a>
        </div>
      </div>
    <% end %>
</div>

<h1>Albums</h1>
<div class="ui cards">
<% @search["album"].each do |album| %>
  <div class="card">
    <a class="image">
      <img src="<%= album.images.first["url"] %>">
    </a>
    <div class="content">
      <a class="header"><%= album.name %></a>
    </div>
  </div>
<% end %>
</div>

<h1>Songs</h1>
<% @search["tracks"].each do |song| %>
    <div class="ui list">
      <div class="item">
        <img class="ui avatar image" src="<%= song.album.images.first["url"] %>">
        <div class="content">
          <a class="header"><%= song.name %></a>
          <div class="description"><%= song.album.name %></div>
        </div>
      </div>
    </div>
<% end %>

---

在你的application.js中，

$（“search”）

不应该是

$（“#search”）

？你能检查为“search_path”@AnantKolvankar search#path生成的路由到静态搜索吗？静态搜索会以静态方式呈现结果#home@NitishParkar是的，我想应该。我刚刚更改了它，但结果相同。那么home.js.erb中的内容是什么？

<h1>Artists</h1>
<div class="ui cards">
    <% @search["artist"].each do |artist| %>
      <div class="card">
        <!-- Artist image should go here -->
        <div class="content">
          <a class="header"><%= artist.name %></a>
        </div>
      </div>
    <% end %>
</div>

<h1>Albums</h1>
<div class="ui cards">
<% @search["album"].each do |album| %>
  <div class="card">
    <a class="image">
      <img src="<%= album.images.first["url"] %>">
    </a>
    <div class="content">
      <a class="header"><%= album.name %></a>
    </div>
  </div>
<% end %>
</div>

<h1>Songs</h1>
<% @search["tracks"].each do |song| %>
    <div class="ui list">
      <div class="item">
        <img class="ui avatar image" src="<%= song.album.images.first["url"] %>">
        <div class="content">
          <a class="header"><%= song.name %></a>
          <div class="description"><%= song.album.name %></div>
        </div>
      </div>
    </div>
<% end %>

$("#music").html("<%= escape_javascript(render("music")) %>")

$(function() {
  $("#search input").keyup(function() {
    $.get($("search").attr("action", $("#search").serialize(), null, "script"));
    return false;
  });
});