Adding a Basic Search Form in Rails

Written by Megan Wong

Are you working on a Rails project, but cannot figure out how to add a filtering functionality? Here are user-friendly steps to implement a simple search bar into your application:

Step 1: Set Up Your Rails App

First, make sure that your Rails application functions correctly. Next, implement your MVC structure properly and complete your migrations and associations. Seeded data is optional, but it’s helpful to ensure that everything runs smoothly.

For this example, we’ll be using an MVC structure with different types of sushi!

On our fish index page (views/fish/index.html.erb), the goal is to find what kinds of fish we need to make a particular type of sushi roll. All fish instances display initially, but only the fish necessary to make our specific roll populate upon searching.

In order for the search function to work correctly, the MVC structure needs different elements added to each part. In this example, it isn’t necessary to follow the steps in order but it is presented here sequentially for clarity.

Step 2: (M) Add Method to Model

Add a search method to our model page — i.e., our fish class — which allows the controller to call on it whenever someone presses the search button.

We can break this down further:

• Self: We chose “self” for this method because the goal is to identify the instances that match our parameters by calling upon the fish class
• Search: Search is the params[:search] that we take in as an argument given to us from our form implemented on the sushi index page.

Our first If Statement determines whether we entered input into the search form. If we received nothing and params[:search] displays as empty, nil indicates false, and the Else Statement returns all of the fish instances.

• Sushi_type: After our first If Statement, we then sift through all of our sushi instances using find_by until we either find an object with the name attribute that matches our search parameters or there are no instances left to search. In the event of no matching instances, we enact our Else Statement and return all of the fish instances per normal index page procedure.

If we find a matching sushi instance, we then use that sushi object to see the associated fish. Using self (or Fish).where, we check for any fish instances that match the sushi ID number previously acquired from sushi_type. This array of instances returns to the controller.

Step 3: [C] Call on Method in Controller

Ordinarily, the only index action method we use is @fishes = Fish.all, but the goal is to use our search function and display our normal index page with all of the fish objects. To do this, we edit our normal index action to include the search method we just wrote in our fish class.

This way, the search function is only invoked when the index page displays. After fully understanding our search method, we know whether search parameters are indicated or not, and if the fish index page shows all of the fish instances.

Step 4: Permit Search Parameter in Strong Params

It’s essential we permit our search parameter in order to make a search by going to our strong params in the fish controller and adding :search.

This addition asks the params for permission to allow the search key every time we call on the search method.

Step 5: [V] Add Search Form to Index Page

This step can sometimes be first, but there are many integral components to our search bar’s functionality.

• Form_tag: Form_tag is one of the few different embedded Ruby form options we have in Rails. Form_tag is especially useful when we do not want to edit any of our model attributes or aren’t calling on a particular instance. In this case, we want to sort our data and call on the index path again, which form_tag is excellent for. You can read more about the many different types of forms tags in Rails in the documentation.
• Label_field: This is our label tag.
• Text_field_tag: This tag is critical because it will hold our search params, which we used extensively. It’s important to note that we used the text_field_tag instead of text_field, which can manipulate our attributes.

The first :search is to indicate our search parameter as a value. The params[:search] is the key we will use later on, and it allows the search bar text field to continue displaying the search text.

• Submit_tag: Our submit tag is simple — the first attribute is the displayed text on the button. The :name => nil attribute enables us to remove the commit keyword from our search query in the URL.

It is important to note that we called on fish_index_path with a method of get in our form because we want to call the index page again to show our search parameters’ filtered results. This would not be a post-action because we do not wish to post or add anything new to our database (see routes below for clarification).

Step 6: Test Out the Search

And there you have it! After running a Rails server command in your terminal and going to your friendly localhost:3000, you’ll be able to see your new search bar in action.

This article was originally published by a WWCode member on her blog.