Creating a Search Bar for a Rails Application
Are you currently trying to test your limits by only using Ruby, CSS, and HTML to build a website? Bruce Lee would be proud! Chances are, you’ve probably run into a variety of challenges. In this article, I’ll attempt to lighten some of the load by showing you a fairly straightforward way to take user input to filter output in a Rails webpage
Heads up
The method that I’m showing here works very well if you’re seeking to search within a “child class” (a class that belongs_to a parent class) or are looking to filter output based on the attributes that a given class has been initialized with. If you’re looking to search within a “parent class” with a has_many relationship, this might not be the most straight forward method for you. However, like most things in life, it is definitely possible :) . Now let’s jump in!
The Goal
2020 has been pretty tough for cats, but 2020 has been brutal for cats that are pursuing music careers. We’re going to provide a vital service for the artistic cat community by creating a website that connects struggling artists with potential clients (who are not necessarily all cats) looking to hire them for projects. To make it easier for clients to pick an artist in their price range, we’re going to create a search bar that filters cats that fit their budget.
The Schema
This app actually has a fair amount of models and relationships, but for our purposes we only really care about the cat artists because they can set their own rates and thus hold the attribute “:rate” in their migration table.
Working in the Model
We’ll need to work in the view, routes, controller, and model files to make this work. You could start in any order but I want to get the logic out of the way first so I’m going to start in the model file.
We want a class method that takes in user input of a number and queries the database for class instances with rates less than or equal to that number. Here’s what we’ve come up with:
Remember that we’re writing a class model in the artist model file soself refers to the entire class not just one instance. Let’s break this down. The method takes in an argument search which is just the user input. If the user inputs a search (if search) into the search bar, we convert that search into an integer (search_rate = search.to_i ). We then use a where method to ask the database if there are any artists with rates greater than or equal to the search_rate . If this condition is met, we return a selection of artists ordered (from least to greatest) by rate. Else (if the condition isn’t met), we return all of the artists. If the user does not input a search, the argument will be nil and the page will display all of the artists.
Working in the Controller
The hard part is over! Now we need to head over to the ArtistsController and complete two crucial actions. First, we need to alter our params.
Only the last param matters here. Notice how this :search_by_rate param has the same name as the search_by_rate . That is because it is the exact same method. We’re using our custom method as an attribute!
Second we need to alter our ArtistsController #index action.
If you haven’t done so already, head over to routes and create a route that will get your request to the ArtistController’s #index action.
Basically, the value of @artists depends on whatever the user inputs. Remember that if the user inputs nothing, the search_by_rate method will return Artist.all like in an ordinary index page. If the user inputs a number, then the index page will show a selection of artists with rates less than or equal to that number.
Working in the View File
The above form will create our simple search button. The last line of code is completely optional. It’s a crude way to clear the search. It simply reloads the index page without a search.
So what’s going on here? This form will take the user’s input in the search bar, store it in the params[:search_by_rate] hash and send it to the ArtistController’s #index action that we just created once we hit submit. Artists_path, method: :get is just saying GET “/artists/”, to: artists#index, as :artists. Hitting submit will actually reload a new page with just the artists that satisfy our search conditions.
Believe it or not… we’re done!
The result
Cat musicians finally have a way to connect with a whole new network of clients, thus providing them a valuable revenue stream. 2020 wasn’t so bad after all!
