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（）