Rails：需要幫助來構建基本的AJAX搜索表單並顯示結果

Question

我正在嘗試構建搜索表單，但在理解特定情況下使用UJS的正確方法時遇到了麻煩。 我遇到的主要問題是我無法弄清楚如何獲取在表單中選擇的參數並執行查詢，然后返回搜索結果。

我希望能夠從使用下拉選擇元素和日期字段的模型中選擇幾個“搜索條件”。 選擇搜索項以構建查詢后，我要提交POST或GET請求，並通過ajax將結果返回並顯示在搜索表單下方的列表中，而無需重新加載頁面。

當前，我有一個名為search的靜態頁面，其路由設置為：

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

index.html.erb

<h1>Search</h1>

<!-- search form -->
<div id="search">  
  <%= render 'form' %>
</div>

<!-- search results -->
<div id="results">
</div>

我有一個帶有'index'動作的SearchController，該動作可處理所有項目集合的加載，以放入使用collection_select（）方法構建的搜索表單下拉菜單中。

SearchController

class SearchController < ApplicationController
  def index
      # load up all the items to display as selectable search parameters to build query from
      # Collections, Categories, Names
      @collections = Collection.all
      @categories = Category.all
      @names = Name.all            
  end

  def create
    @collection = Collection.find(params[:collection][:id])
    @category = Category.find(params[:category][:id])
    @name = Name.find(params[:fullname][:id])      

    respond_to do |format|
      format.html { redirect_to search_url }
      format.js
    end    
  end
end

我在部分表單中使用的表單：_form.htm.erb

<%= form_tag( {controller: "search"}, class: "search_form", remote: true) do %>
  <%= label_tag("Categories: ") %>
  <%= collection_select(:category, :id, @categories, :id, :name, {}, html_options = { multiple: false }) %>

  <%= label_tag("Collections: ") %>
  <%= collection_select(:collection, :id, @collections, :id, :title, {}, html_options = { multiple: false }) %>

  <%= label_tag("Names: ") %>
  <%= collection_select(:name, :id, @names, :id, :fullname, {}, html_options = { multiple: false }) %>

  <%= submit_tag("Submit") %>
<% end %>

當我在頁面中提交表單時，我在Chrome控制台中看到帶參數的ajax請求。 我試圖在哈希中給form_tag一個動作，但是除非我在route.rb文件中指定它，否則它似乎找不到路由。

當然，

<%= form_tag( {controller: "search", action: "create"}, class: "search_form", remote: true) do %>

問：如果我使用的是ajax，是否需要特殊的路線？

問：如何將參數帶入任何名稱的SearchController動作中並對其進行處理？

我希望首先能夠在結果div中將搜索查詢項顯示為文本，以便我知道該操作的工作原理。 我想我只會使用js / jQuery將參數的值附加到結果div中。

問：還有另一種方法可以做這樣的事情嗎？

Answer 1

強烈建議使用以下方法： 使用AJAX進行搜索，排序和分頁

順便說一下，作者使用的jquery方法.live（）已過時，並已替換為.delegate（） jquery文檔.deleate（）