Rails: Need help building a basic AJAX search form and displaying results

Question

I am trying to build a search form and am having trouble understanding the proper way to use UJS in my specific situation. The main issue I have is that I can't figure out how to take the params selected in my form and execute the query then return the results of the search.

I would like to be able to select several "search criteria" from models I have using dropdown select elements and date fields. Upon selecting the search items to build a query I want to submit a POST or GET request and have the results returned and displayed in a list below the search form via ajax without reloading the page.

Currently, I have a static page called search with a route setup as:

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>

I have a SearchController with an 'index' action that handles loading up all the collections of items to put into my search form dropdown menus built using collection_select() methods.

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

The form I am using in a partial: _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 %>

When I submit the form in the page I see the ajax request with params in the Chrome console. I tried to give the form_tag an action in the hash but it can't seem to find the route unless I specify it in the routes.rb file.

Ex,

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

Q: Do I need to have a special route if I am using ajax?

Q: How do I bring the params into a SearchController action of any name and do something with it?

I would like to first be able to display the search query items as text in the results div so I know how the action works. I imagine I would just use js/jQuery to append the values of the params submitted to the results div.

Q: Is there another way to do something like this?

Answer 1

Strongly recommend to go with this approach: Search, Sort, Paginate with AJAX

by the way the jquery method .live() which author using is outdated and were replaced with .delegate() jquery documentation .deleate()