Rails:需要帮助构建基本的AJAX搜索表单并显示结果

时间:2013-07-18 13:55:14

标签: javascript ruby-on-rails forms ujs

我正在尝试构建搜索表单,并且无法理解在特定情况下使用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控制台中看到了带有params的ajax请求。我试图给hash_tag一个动作,但是除非我在routes.rb文件中指定它,否则它似乎找不到路由。

前,

<%= form_tag( {controller: "search", action: "create"}, class: "search_form", remote: true) do %>
问:如果我使用的是ajax,我是否需要有特殊路线?

问:如何将params引入任何名称的SearchController动作并对其执行某些操作?

我想首先能够在搜索结果div中将搜索查询项目显示为文本,以便我知道该操作的工作原理。我想我会使用js / jQuery追加提交给结果div的params的值。

问:有没有其他方法可以做这样的事情?

1 个答案:

答案 0 :(得分:1)

强烈建议采用这种方法: Search, Sort, Paginate with AJAX

顺便说一下,作者使用的jquery方法.live()已经过时,并被替换为.delegate()jquery documentation .deleate()

相关问题