Rails AJAX 搜索表单重新加载页面答案

【问题标题】：Rails AJAX Search form reloading pageRails AJAX 搜索表单重新加载页面
【发布时间】：2013-02-06 07:07:56
【问题描述】：

AJAX 和搜索新手。我觉得我离这个还有一英寸，但我不确定要解决什么问题。另外，我的控制器现在对我来说真的很老套。

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

posts_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

让我印象深刻的“hacky”是我重复了所有的变量赋值（还有一些我没有展示，因为它们不相关）。理想情况下，AJAX 调用是否不应该重新定义/重新加载所有这些变量？此外，我必须通过隐藏字段将 :id 传递给我的搜索操作。我觉得这很奇怪/不对。

show.html.erb

<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 %>

routes.rb

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

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

上述我的控制器的混乱。
整个页面重新加载的事实。这不与 AJAX 应该做的相反吗？如何让它重新加载链接列表？
网址。它非常混乱（即“/search?utf8=✓&term=limits&id=11&commit=Search”）。理想情况下，我希望它不受搜索影响，但如果这不可能，也许只是像“/search？=”这样的东西。这是怎么做的？

【问题讨论】：

但是我在你的代码中看不到任何 Ajax 逻辑？
只是提交标签中的remote:true。我曾经将它放在 form_tag 上，但我移动了它。我认为这就是 Rails 所需要的。我从来没有在 Rails 或其他地方使用过 AJAX，所以我不确定 AJAX 逻辑会去哪里。
Ajax 需要 Javascript 和服务器端代码来实现。我假设你需要的是像谷歌搜索这样的东西，在点击一些字符后，整个搜索结果发生了变化。对吗？
嗯，是的。不是 google insta-search （虽然我想那会很好）。我目前正在这样做，以便在用户按下提交时重新运行整个搜索。

标签： ruby-on-rails ajax ruby-on-rails-3

【解决方案1】：

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

在控制器中，您创建一个方法说“搜索”。该方法需要一个参数，该参数是要搜索的短语。它从 db 中获取结果并仅以结果响应 JSON。
在模板中有一个搜索表单。
在 JS 中，你监听用户点击提交按钮的事件，捕捉他们写的字符，然后处理给 ajax 函数。
编写 Ajax 代码，最好使用 jQuery 的 ajax()。基本上使用 ajax() 将键入的字符作为参数发送到 #1 中的控制器方法。然后 ajax() 将从服务器获取响应（搜索结果）。
更新 DOM 中的结果。您可以添加一个新的 div 来显示搜索结果，或者替换当前的主要内容 div 来显示结果。

【讨论】：