Community

Humberto Diaz

Supply Chain Analyst - Team Lead 

In the article ["Getting Started with MongoDB Atlas and Ruby on Rails,"](https://www.mongodb.com/developer/languages/ruby/getting-started-atlas-ruby-on-rails/)  Luce Carter showed us how to integrate MongoDB Atlas in a Ruby on Rails application named Inspiration. Users could capture and organize their creative ideas, thanks to the integration of MongoDB Atlas. In this article, we'll build upon the foundation laid out in Luce’s article and take a deeper dive as we integrate text search directly within our Rails application. By the end of this article, you will have a fully functional search feature embedded in your Rails app, allowing users to efficiently find the ideas they need.

# Prerequisites
Before getting started, you will need to complete the following:

 1. Fork and clone a copy of the Inspiration app available on [GitHub](https://github.com/mongodb-developer/mongodb-atlas-with-ruby-on-rails-example/tree/main/). 
 2. Create a MongoDB Atlas cluster.
 3. Update the development config section inside ```config/mongoid.yml``` and add your own connection string. 
 4.  Ensure that you have data stored in your MongoDB Atlas cluster that you can query against Atlas Search. This should include the ideas you have added to your Inspiration application.
 5. Using the Atlas UI create an Atlas Search index called inspiration. A step by step guide on how to create an Atlas Search index can be found in the [Atlas documentation](https://www.mongodb.com/docs/atlas/atlas-search/tutorial/create-index). 

# Configure the search method in your model
Now that we have our environment properly configured, and our inspiration index created, we can update our model to handle queries to our database. We do this by defining a search method in our *Idea* model. The method ```self.search(query):``` defines a class method named search that takes a single argument query and returns the results. 

 - Open your ```idea.rb``` file
 - Replace its contents with the content below:
```ruby
class Idea
 include Mongoid::Document
 include Mongoid::Timestamps
 field :name, type: String
 field :description, type: String
 field :picture, type: String
 
def self.search(query)
   aggregation_pipeline = [
      {
        "$search": {
          "index": "inspiration",
          "text": {
            "query": query,
            "path": ['name', 'description']
          },
          "sort": {
            "score": {"$meta": "searchScore"}
          }
        }
      },
      {
        "$limit": 20
      }
    ]
   results = collection.aggregate(aggregation_pipeline)

   search_results = results.to_a
   search_results.map do |result|
     Idea.new(
       id: result["_id"],
       name: result["name"],
       description: result["description"],
       picture: result["picture"]
     )
   end
 end
end
```

When you call ```idea.search("example query")```, Mongoid constructs and executes a MongoDB query that:

 1. Performs a full text search using Atlas Search on the inspiration index.    
 2. Runs a query across the name and description fields.
 3.  Sorts the results by their relevance score.
 4. Limits the results to 20. Using a limit is good practice to avoid performance issues if your collection contains millions of documents.

The *search_results* variable then converts the raw results from MongoDB into an array of hashes that can then be mapped to new Idea instances and rendered in our view files.  

```ruby
search_results.map do |result|
  Idea.new(
    id: result["_id"],
    name: result["name"],
    description: result["description"],
    picture: result["picture"]
  )
end
```

# Adding a search action in our IdeasController
Now that we have defined our search query in our Idea model, we need a way to initiate that search. We do this by adding a search action in our IdeasController. 
Add the following code to your IdeasController: 
      

```ruby
def search
    @query = params[:query]
    @ideas = @query.present? ? Idea.search(@query) : Idea.all
    render :display_results
  end
``` 
With this setup, when you submit a search query it will call the search method in the *Idea* model to perform the search. The results will then be rendered in our view files.    
  
# Generating our search controller
We will be creating a separate *SearchesController* to handle search requests and to display the search results. 

Run the following command to generate the SearchesController and the display_results view file.
```bash
rails generate controller Searches display_results
```    
 Open your ```searches controller.rb``` file and add the following code.
```ruby
class SearchesController < ApplicationController
  def display_results
    query = params[:query]
    @results = Idea.search(query)
  end
end
```
 Open the file ```display_results.html.erb``` and add the below, which will return our search results. 

```erb
<div class="search-results">
  <h1>Search Results for "<%= params[:query] %>"</h1>

  <% if @results.empty? %>
    <p>No ideas found.</p>
  <% else %>
    <div class="idea-container">
      <% @results.each do |result| %>
        <div class="idea">
          <h2><%= result.name %></h2>
          <p><%= truncate(result.description, length: 150) %></p>
          <img  src="<%= result.picture %>" alt="<%= result.name %>" />

          <p><%= link_to "View", idea_path(result.id) %></p>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

<%= link_to "Back", ideas_path %>
```

 In your ```application.css``` file, add the below to create some basic styling for your search results:

```css
.search-results {
   /* Add styles for the search results container */
   width: 80%;
   margin: 0 auto;
 }
  .idea-container {
   display: flex;
   flex-direction: column;
 }
  .idea {
   padding: 20px;
   border-bottom: 2px solid #ccc;
   border-radius: 10px 10px 0 0;
   margin-bottom: 10px;
 }
  .idea h2 {
   margin: 0;
 }
  .idea p {
   margin: 0;
 }
  .idea img {
   width: 100px; /* Adjust the width of the image */
   height: auto; /* Maintain aspect ratio */
   display: block; /* Ensure the image takes up full width */
 }
  /* Remove bullet points */
 ul {
   list-style-type: none;
   padding: 0;
 }
```

With this setup, when you submit a search query, it will be routed to the ```SearchesController```, which will call the search method in the ```Idea``` model to perform the search. The results will then be displayed in the ```display_results``` view.

# Creating the search form
Now, we just need to create a simple UI so that users can submit queries directly in our Rails application. 

 - Open your ```index.html.erb```.
 - Copy and paste the code below to add a search form and a placeholder for search results. 
```erb
<%= form_tag(search_results_path, method: :get, class: "form-inline") do %>
   <div class="input-group mb-3">
     <%= text_field_tag :query, params[:query], placeholder: "Search Ideas...", class: "form-control" %>
     <div class="input-group-append">
       <%= submit_tag "Search", class: "btn btn-primary text-white" %>
     </div>
   </div>
 <% end %>
```
 - Add the following styling for the search bar in your ```application.css``` file:

```css
.input-group {
 width: 100%;
}

.btn-primary {
 background-color: #007bff;
 border-color: #007bff;
 color: white;
}

.btn-primary:hover {
 background-color: #0056b3;
 border-color: #004085;
}
```

# Updating our routes to include our search results
To redirect users to the display_results view file, we need to update our routes.rb.

Add the following get request to your routes file: 
```ruby
Rails.application.routes.draw do
  root to: "ideas#index"

  resources :ideas
  get '/search_results', to: 'searches#display_results', as: "search_results"
end
```

# Running our local server
It’s time to test out our application. Begin by running the following command in your project directory:

```bash
rails server 
```
Navigate to [Port: 3000](http://127.0.0.1:3000) and you should now be able to see a search bar appear on the  web page. 

![Index pages listing out all ideas in our application](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt4b6c08da2b0361d9/6668393c1774d2633aa12e52/Screenshot_2024-06-11_at_12.46.44.png)

# Submit a query on the app
To submit a search, add your query term in the search bar and click on “Search.” 

Here are the results of a search in my MongoDB database for the word “pet”:
![A list of ideas are displayed matching the search term "pet."](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltabbb255511733065/66684c7f3641c7e01213362d/Screenshot_2024-06-11_at_14.08.44.png)

Please note that search results are dependent on the contents of your own database. So make sure your database has the data you are requesting. However, as the complexity of your data increases, the need for more advanced search queries may be necessary. Refer to the MongoDB [documentation](https://www.mongodb.com/docs/mongoid/current/reference/queries/)  for information regarding these queries. 

# Summary
And with that, we now have a fully functional search feature integrated into our Rails application. This integration not only enhances the usability and functionality of our application but can also help improve user engagement. Our Rails app now offers a powerful tool for users to find and manage their creative ideas effectively. Be sure to explore more about MongoDB Atlas and Rails in the [community forums](https://www.mongodb.com/community/forums/?utm_campaign=devrel&utm_medium=cta&utm_content=Dev+Center+article+on+Ruby+on+Rails+written+by+Luce&utm_term=luce.carter), share your experiences, or ask any questions you may have! 

Learn how to add Atlas Search to your Ruby on Rails application in this tutorial from Humberto Diaz.

Humberto Diaz

Content by Humberto Diaz

Integrating Atlas Search in a Ruby on Rails Application