Rails add a search function controller and route best practice

1.Task description

I worked on a Ruby on Rails app, and one day I got a task to add this new feature:

Create a search page(So user can search items by category).

After hitting the "search" button, it takes the user to item list page.

For simplicity and to avoid dragging  myself away from the main topic I want to talk about:

The search page could simply look like this:

The item list page could just look like this:

2.My initial approach

2.1 Strategy:

Q: How to render the search page?

A: Create a search action.

Q: How to perform the search function?

A: Create a index action, which handles the search function. The search form should submit a post request to this action.

Q: How to render the item list page?

A: Let index action render item list page.

2.2 Implementation:

Route:

config/routes.rb:

get 'items/search', to: 'items#search'post 'items/index', to: 'items#index'

Controller:

items_controller.rb:

class ItemsController < ApplicationController    def index        # perform search code goes here        render 'index'    end    def search        render 'search'    endend

View:

/items/search.html.erb:

<%= form_tag <span style="color:#FF0000;">items_index_path</span>, method: '<span style="color:#FF0000;">post</span>' do %>    <label>category:</label>    <input type="text" name="category">    <button>search</button><% end %>

2.3 Implementation in action

after hitting the search button:

2.4 Problem

This works perfectly, until I manually refreshed the index page.

Since there's no get route, it errors out! Of course I could add a get route, but in that way, I will have to store the form parameters in session. Is there another approach?

3. Second approach

3.1 Strategy:

Q: How to render the search page?

A: Create a search action.

Q: How to perform the search function?

A: Create a index action, which handles the search function. The search form should submit a get request to this action, so that the search parameters are in the URL, so that I don't need to worry about storing them in session.

Q: How to render the item list page?

A: Let index action render item list page.

A note: 

In the future, there might be other tasks to add view item detail, edit item functions and on. So it's better  use rails default resource: http://guides.rubyonrails.org/routing.html

3.2 Implementation:

Route:

config/routes.rb:

get 'items/search', to: 'items#search'resources :items, only: [:index] doend

Controller:

The same as first approach.

View:

/items/search.html.erb:

<%= form_tag <span style="color:#FF0000;">items_path</span>, method: '<span style="color:#FF0000;">get</span>' do %>    <label>category:</label>    <input type="text" name="category">    <button>search</button><% end %>

3.3 Implementation in action

after hitting the search button:

3.4 Concern

We can see the parameters are passed in the URL, and I'm good even though I refresh.

This approach definitely works. The only concern is that it brought in a search action, which is not part of rails default resource; and the search page and item list page are on different URL.

I want to utilize rails default resource, and keep search and item list page on the same URL.

So here comes the third approach.

4. Third approach

4.1 Strategy:

Q: How to render the search page?

A: Use index action. Check if user is not performing a search, render search page. (Trick is add a hidden input in the form)

Q: How to perform the search function?

A: Perform it in index action.

Q: How to render the item list page?

A: Use index action. Check if user is performing a search, render index page.

4.2 Implementation:

Route:

config/routes.rb:

resources :items, only: [:index] doend

Controller:

class ItemsController < ApplicationController    def index        if params[:search].blank?            render 'search'        else            # perform search code goes here            render 'index'        end     endend

View:

/items/search.html.erb:

<%= form_tag <span style="color:#FF0000;">items_path</span>, method: '<span style="color:#FF0000;">get</span>' do %>    <input type="hidden" name="search" value="true">    <label>category:</label>    <input type="text" name="category">    <button>search</button><% end %>

3.3 Implementation in action

after hitting the search button: