1

我正在尝试构建一个搜索表单，但无法理解在我的特定情况下使用 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>

我有一个带有“索引”操作的 SearchController，它处理加载所有项目集合以放入使用 collection_select() 方法构建的搜索表单下拉菜单中。

搜索控制器

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 一个动作，但它似乎无法找到路由，除非我在 routes.rb 文件中指定它。

前任，

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

Q：使用ajax需要特殊路由吗？

问：如何将参数带入任何名称的 SearchController 操作并对其进行处理？

我希望首先能够在结果 div 中将搜索查询项显示为文本，这样我就知道该操作是如何工作的。我想我会使用 js/jQuery 将提交的参数值附加到结果 div 中。

问：还有其他方法可以做这样的事情吗？

4

1 回答 1

1

强烈推荐使用这种方法： Search, Sort, Paginate with AJAX

顺便说一句，作者使用的 jquery 方法 .live() 已过时，并被替换为 .delegate() jquery 文档 .deleate()

于 2013-10-15T14:57:08.127 回答