Ruby on rails Rails AJAX搜索表单重新加载页面

AJAX和搜索新手。我觉得我离这件事有一英寸远，但我不知道该怎么办。而且，我的控制器现在看起来很粗糙

无论如何，我正在尝试创建一个搜索，允许用户使用AJAX搜索我页面上的博客文章。以下是（相关部分）部分：

posts\u controller.rb

def show
  @posts = Post.all.reverse
  @post = Post.find(params[:id])
  @link_num = 10

  respond_to do |format|
    format.html # show.html.erb
    format.json { redirect_to @post }
  end
end

def search
  @link_num = 10
  @posts = Post.all.reverse
  @post = Post.find(params[:id])

  #The including function returns the search results
  @search = Post.first.including(params[:term])
  render 'show'
end

<h1 class="squeeze">Recent Posts</h1>
  <%= form_tag("/search", method: "get", class: "search") do %>
        <%= text_field_tag(:term, '', placeholder: "Search posts:") %>
        <%= hidden_field_tag(:id, @post.id) %>
        <%= submit_tag("Search", class: "btn search_button", remote: true) %>
    <% end %>
  <% if !@search%>
    <ul>
        <% @posts.first(@link_num).each do |p| %>
            <li><a href=<%= p.id %> ><%= p.name %> <span class="manual_small">(<%= p.created_at.strftime("%b %d, %Y") %>)</span></a></li>
        <% end %>
        <% if @posts.length > @link_num %>
            <div class="link_disclaimer">
            <h4>---</h4>
            <h5><%= "Only showing #{@link_num} most recent posts." %></h5>
            <h5>Search to narrow results.</h5>
        </div>
        <% end %>
    </ul>
  <% elsif @search.empty? %>
    <h3>Term not found!</h3>
  <% else %>
    <ul>
        <% @search.first(@link_num).each do |p| %>
            <li><a href=<%= p.id %> ><%= p.name %> <span class="manual_small">(<%= p.created_at.strftime("%b %d, %Y") %>)</span></a></li>
        <% end %>
        <% if @search.length > @link_num %>
            <div class="link_disclaimer">
                <h4>---</h4>
                <h5><%= "Only showing first #{@link_num} relevant hits." %></h5>
                <h5>Narrow search for more specific results.</h5>
            </div>
        <% end %>
    </ul>
  <% end %>

match '/search', to: 'posts#search'

这里让我感到“骇客”的是我重复了所有的变量赋值（还有一些我没有显示，因为它们不相关）。理想情况下，AJAX调用不需要重新定义/重新加载所有这些变量吗？此外，我必须通过一个隐藏字段将：id传递给我的搜索操作。我觉得这很奇怪/不对

show.html.erb

def show
  @posts = Post.all.reverse
  @post = Post.find(params[:id])
  @link_num = 10

  respond_to do |format|
    format.html # show.html.erb
    format.json { redirect_to @post }
  end
end

def search
  @link_num = 10
  @posts = Post.all.reverse
  @post = Post.find(params[:id])

  #The including function returns the search results
  @search = Post.first.including(params[:term])
  render 'show'
end

<h1 class="squeeze">Recent Posts</h1>
  <%= form_tag("/search", method: "get", class: "search") do %>
        <%= text_field_tag(:term, '', placeholder: "Search posts:") %>
        <%= hidden_field_tag(:id, @post.id) %>
        <%= submit_tag("Search", class: "btn search_button", remote: true) %>
    <% end %>
  <% if !@search%>
    <ul>
        <% @posts.first(@link_num).each do |p| %>
            <li><a href=<%= p.id %> ><%= p.name %> <span class="manual_small">(<%= p.created_at.strftime("%b %d, %Y") %>)</span></a></li>
        <% end %>
        <% if @posts.length > @link_num %>
            <div class="link_disclaimer">
            <h4>---</h4>
            <h5><%= "Only showing #{@link_num} most recent posts." %></h5>
            <h5>Search to narrow results.</h5>
        </div>
        <% end %>
    </ul>
  <% elsif @search.empty? %>
    <h3>Term not found!</h3>
  <% else %>
    <ul>
        <% @search.first(@link_num).each do |p| %>
            <li><a href=<%= p.id %> ><%= p.name %> <span class="manual_small">(<%= p.created_at.strftime("%b %d, %Y") %>)</span></a></li>
        <% end %>
        <% if @search.length > @link_num %>
            <div class="link_disclaimer">
                <h4>---</h4>
                <h5><%= "Only showing first #{@link_num} relevant hits." %></h5>
                <h5>Narrow search for more specific results.</h5>
            </div>
        <% end %>
    </ul>
  <% end %>

match '/search', to: 'posts#search'

目前，搜索本身运行良好，存在三个主要问题：

前面提到的我的控制器的混乱

整个页面重新加载的事实。这难道不是AJAX应该做的相反的事情吗？如何让它只重新加载链接列表

URL。它非常混乱（即“/搜索？utf8=✓&术语=限制&id=11&commit=Search”）。理想情况下，我希望它不会被搜索所触及，但如果这不可能，可能只是像“/搜索？=”这样的东西。怎么做到的

---

根据这里的注释，是使函数工作的基本逻辑（很抱歉没有真正的代码，因为这太耗时了）

在控制器中，您使一个方法显示“搜索”。该方法需要一个参数，该参数是要搜索的短语。它从db获取结果，并仅用结果响应JSON

在模板中，您有一个搜索表单

在JS中，您可以监听用户单击submit按钮的事件，捕捉他们编写的字符，并将其处理到ajax函数

编写Ajax代码，最好使用jQuery的Ajax（）。基本上使用ajax（）将类型化字符作为参数发送到#1中的控制器方法。然后ajax（）将从服务器获取响应（搜索结果）

在DOM中更新结果。您可以添加新的div以显示搜索结果，也可以替换当前的主内容div以显示结果

---

但是我在您的代码中看不到任何Ajax逻辑？只有submit标记中的remote:true。我以前把它贴在表单标签上，但我把它移走了。我以为这就是我对Rails所需要的。我从未在Rails或其他方面使用过AJAX，因此我不确定AJAX逻辑将走向何方。AJAX需要Javascript和服务器端代码来实现。我想你需要的是谷歌搜索，在点击一些字符后，整个搜索结果都会改变。是吗？嗯，是的。不是谷歌insta搜索（虽然我想那会很好）。我现在这样做是为了在用户按submit时重新运行整个搜索。