Creating Search Functionality for Your Web App

Not as hard as it seems….

If you’re going to build a web app, one of the basic tenets you’re going to need is a search bar. Pagination and layout are all well and good, but users have a short attention span. If they can’t find what they are looking for, they find somewhere else that will.

For Ruby Developers, much of this can often be handled by way of Gem. The question then becomes, which one? Which gem best handles my search needs? To narrow it down, here is a snapshot of the most common ones:

For me, the best one to go with was the gem ‘rails-simple-search’. If you were setting up your Gemfile, it would look like this:

After you pull this off of, you’ll want to place this into your Gemfile and then run bundle install.

Understanding the Nature of Search Functionality:

If you’re new to search, you need to have a clear idea of what kind of search options are available. Some search gems will do google searches for you, whereas others are built to search your existing database, i.e., search the information that you already have loaded on to your site.

If you decide that the Internet is what you are after, here is the gem you might use:

For our purposes, we will install search the looks at your local database because, after all, if they are on your site, you want to make it as easy as possible for them to find what they are looking for. So here we go, here’s what you should do:

  1. Add rails ‘simple-search’ to your Gemfile
  2. run bundle install
  3. Think about where you would want to put your search. For most people, this means the navbar. Here is one example that we will look at:

What you’re looking at here is Search that is set up inside of a nav bar (bootstrap) structure. This code snippet does the following things

<%= form_tag(jobs_path, method: “get”, id: “search-form”) do %>

This line basically triggers the controller to retrieve the information that we need. More or less, this is the meat of the whole thing where the rest is more or less cosmetic as you’ll see in a second.

<%= text_field_tag :search, params[:search], class: “form-control box-height”, placeholder: “Search Jobs” %>
 <%= button_tag(class: ‘btn btn-info btn-lg’, type: “submit”) do %>

These lines more or less dictate the styling of the search box.

4. At this point, your search bar is visible to the user, but it still doesn’t function. From there you’ll need to deal with the Controller and the Model.

5. You’ll need to set up your Controller. Here’s a look:

In this code, this basically tells the web app to do two things: search for results and give me no more than 5 at a time (pagination). So that line of code we looked at a minute will function because these few lines are in place.

6. From here, we need to have something in place with our model. Our model. In the lines we have below, this specifies what kinds of information it will search for (names, addresss, etc). So you’ll see the words “job”, “description”, and “pay” included in here, which means that if you search for this kind of information, the database will pull up what you have saved in your database from here.

7. And that’s it!. There’s always more you can add to tweak and adjust functionality, but this will get you started.

For reference’s sake, please look here, it’s one of the easiest explanations for how to get this important set up on your app going: