Beginners Guide to Making a Ruby on Rails Search Bar

While building a full-CRUD Ruby on Rails app, you might find yourself wanting a search bar. Search bars can be a little intimidating at first, but don’t worry! They’re a great addition to your app and will add greatly to the user experience. You can even build a search bar that takes more than one search parameter!

The first thing we need to do is build out the search field in our views. When building a search bar, you are going to want to use a form tag. Form tags are a versatile form, so we will need to make sure we pass in all of the relevant information. We want to make a GET request on our index page. Restular.com is great resource for making sure we are using the right url:

RESTular Kittens

These are what our URLs would look like if we were making a website to search for adoptable kittens. We’re making a GET request, so we want to use “/kittens”. We also want to make sure that our form tag is using the method “GET”, as opposed to the default “POST”. Within the “/kittens” index page, we will start our form:

<%= form_tag "/kittens", method: "GET" do %>

For a search bar to work, we need search parameters! We can actually search for multiple parameters on the same form. Here we are searching by breed, color, and age. We have to make sure we include params[:search_by_#{parameter}]. This will help us catch the user input and use it later in our controller.

<%= form_tag "/kittens", method: "GET" do %>
  <%= label_tag :search_by_breed %>
  <%= text_field_tag :search_by_breed, params[:search_by_breed] %>
  <%= label_tag :search_by_color %>
  <%= text_field_tag :search_by_color, params[:search_by_color] %>
  <%= label_tag :search_by_age %>
  <%= text_field_tag :search_by_age, params[:search_by_age] %>
  <%= submit_tag "Search" %>
<% end %>

We have to make sure we end our form tag with a submit tag, so the input actually goes somewhere!

Now we need to go to our KittensController to make use of the parameters that we’ve been sent. Our search bar sends us back to index, which is great! Normally, the index for KittensController would show all of the kittens we have. However, we want to filter these kittens based on search terms.

Therefore, we leave the default @ kittens variable as Kitten.all. However, if search terms exist, we need to deal with them! We have to make a series of conditionals. If the user has searched by breed, have rails go through our database and find all kittens who have a breed similar to the typed input. We also need to add another conditional — if the params is not an empty string. This is because all of our searched params will appear in the browser — even if they are empty! We don’t want the blank terms to overwrite the actual terms. By adding “params[:search_by_breed] != “” ”, we ensure that the conditional only runs with a search term.

We need a conditional for each search term. @ kittens updates with each search. The user has the option of using all, two, one, or no searches.

class KittensController < ApplicationController
def index
    @kittens = Kitten.all
    
    if params[:search_by_breed] && params[:search_by_breed] != ""
      @kittens = @kittens.where("breed like ?", 
      "%# {params[:search_by_breed]}%")
    end
    if params[:search_by_color] && params[:search_by_color] != ""
      @kittens = @kittens.where("color like ?", 
      "%# {params[:search_by_color]}%")
    end
   if params[:search_by_age] && params[:search_by_age] != ""
      @kittens = @kittens.where("age like ?", 
      "%# {params[:search_by_color]}%")
    end
 end
end 

At the end of this long journey, we have filtered @ kittens to meet our parameters. If we had params[:search_by_breed] = “tabby” && params[:search_by_color] = “black” && params[:search_by_age]= “3 months”, you might just find this sweet girl!

Our reward for a long day making search bars

Making search bars in Ruby may seem like an arduous task for beginners, but they are an excellent addition to your web app. Don’t be too intimated to try!