Rails AJAX搜索表單重新加載頁面

AJAX和搜索的新手。我覺得我離這一寸只有一寸之遙，但我不確定要修復什麼。此外，我的控制器現在對我來說看起來很黑。Rails 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

讓我深感「哈克」在這裏，我重複所有的變量賦值（還有其他的我沒」 t顯示它們不相關）。理想情況下，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 [email protected]%> 
    <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應該做的事情的對立面嗎？我如何才能重新載入鏈接列表？
URL。這是超級雜亂的（即「/ search？utf8 =✓& term = limits & id = 11 & commit = Search」）。我理想的情況是它不會受到搜索的影響，但如果這是不可能的，可能就像「/ search？=」。這樣做怎麼樣？

來源

2013-02-21 Sasha

但我在這裏看不到任何Ajax邏輯在你的代碼？ – 2013-02-21 03:47:14

只需在提交標籤中輸入remote：true。我曾經把它放在form_tag上，但是我移動了它。我認爲這就是我用Rails所需要的。我從來沒有用Rails或其他方式使用過AJAX，所以我不確定AJAX邏輯會去哪裏。 – Sasha 2013-02-21 03:49:36

Ajax需要Javascript和服務器端代碼來實現。我假設你需要的是類似谷歌搜索的東西，在點擊一些字符後，整個搜索結果發生變化。那是對的嗎？ – 2013-02-21 04:00:55

基於這裏的評論是基本的邏輯，使功能工作（對不起，我沒有真正的代碼，因爲這是非常耗時）

在控制器，你做的方法說「搜索」。該方法需要一個參數，它是要搜索的短語。它從數據庫獲得結果並僅以結果響應JSON。
在模板中，您有一個搜索表單。
在JS中，您將聽用戶單擊提交按鈕的事件，捕獲它們寫入的字符，並將其處理爲ajax函數。
編寫Ajax代碼，首選使用jQuery的ajax（）。基本上使用ajax（）將輸入的字符作爲參數發送到＃1中的控制器方法。然後ajax（）將從服務器獲得響應（搜索結果）。
更新DOM中的結果。您可以添加一個新的div來顯示搜索結果，或者替換當前的主要內容div來顯示結果。

來源

2013-02-21 04:16:58

Rails AJAX搜索表單重新加載頁面

回答

相關問題