Autocomplete feature

.ruby-version

@@ -1 +1 @@
-3.0.2
+3.1.0

Gemfile

@@ -3,7 +3,7 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '3.0.2'
+ruby '3.1.0'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
 gem 'rails', '~> 6.1.4'
@@ -30,12 +30,13 @@ gem 'redis', '~> 4.0'
 gem 'devise'
 
 # User Auth
-gem "recaptcha"
-gem "invisible_captcha"
+gem 'invisible_captcha'
+gem 'recaptcha'
 
+gem 'activerecord-import'
 gem 'active_storage_validations'
 gem 'aws-sdk-s3', require: false
-gem "caxlsx"
+gem 'caxlsx'
 gem 'clockwork'
 gem 'cocoon'
 gem 'draper'
@@ -47,13 +48,12 @@ gem 'pagy'
 gem 'pg_search'
 gem 'pundit'
 gem 'rack-attack'
+gem 'rollbar'
 gem 'roo', '~> 2.8.0'
-gem "sidekiq", "<7"
+gem 'scout_apm'
+gem 'sidekiq', '<7'
 gem 'slim-rails'
 gem 'view_component'
-gem "activerecord-import"
-gem 'scout_apm'
-gem 'rollbar'
 # Use Turbo for rails
 gem 'turbo-rails'
 
@@ -116,7 +116,7 @@ group :test do
   gem 'shoulda-matchers', '~> 4.0'
   gem 'simplecov', require: false
   gem 'timecop'
-  gem 'webdrivers', "~> 5.2", require: false
+  gem 'webdrivers', '~> 5.2', require: false
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -556,6 +556,7 @@ GEM
 PLATFORMS
   arm64-darwin-20
   arm64-darwin-21
+  arm64-darwin-23
   x86_64-darwin-19
   x86_64-darwin-20
   x86_64-linux
@@ -634,7 +635,7 @@ DEPENDENCIES
   webpacker (~> 5.0)
 
 RUBY VERSION
-   ruby 3.0.2p107
+   ruby 3.1.0p0
 
 BUNDLED WITH
    2.3.22

app/components/search_bar/component.html.erb

@@ -1,7 +1,7 @@
 <div id="search-bar" class="sticky inset-x-0 z-20 flex items-center justify-center px-6 py-4 
 bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:gap-5">
   <%# Keyword input %>
-  <div class="relative w-full max-w-xl">
+  <div class="relative w-full max-w-xl" data-controller="autocomplete">
     <span class="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
       <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
     </span>
@@ -13,11 +13,15 @@ bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:
       id: "search-keyword-input",
       placeholder: "Try \"Mental Health Nonprofits\"",
       data: {
-        action: "input->search#displayClearKeywordButton",
-        search_target: "keywordInput"
+        action: "input->search#displayClearKeywordButton input->autocomplete#search",
+        search_target: "keywordInput",
+        autocomplete_target: "input",
       }
     ) %>
 
+      <ul data-autocomplete-target="list">
+      </ul>
+
     <button
     type="button"
     class="absolute inset-y-0 right-0 px-3 <%= "hidden" unless params.dig('search', 'keyword').present? %>"

app/controllers/autocompletes_controller.rb

@@ -0,0 +1,13 @@
+class AutocompletesController < ApplicationController
+  skip_before_action :authenticate_user!
+
+  include Pundit
+
+  skip_after_action :verify_policy_scoped
+  skip_after_action :verify_authorized
+
+  def show
+    suggestions = Locations::KeywordQuery.call({ keyword: params[:query] }).pluck(:name)
+    render json: suggestions
+  end
+end

app/javascript/controllers/autocomplete_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "list"];
+
+  connect() {
+    console.log("Autocomplete controller connected")
+    this.inputTarget.addEventListener("input", this.search.bind(this));
+  }
+
+  async search() {
+      const query = this.inputTarget.value;
+
+      if (query.length < 2) {
+        this.listTarget.innerHTML = "";
+        return;
+      }
+
+      const response = await fetch(`/autocomplete?query=${query}`);
+      const data = await response.json();
+
+      console.log(data)
+      this.renderList(data);
+  }
+
+  renderList(data) {
+    this.listTarget.innerHTML = "";
+    data.forEach(item => {
+      const listItem = document.createElement("li");
+      listItem.textContent = item;
+      this.listTarget.appendChild(listItem);
+    });
+  }
+}

app/queries/locations/keyword_query.rb

@@ -5,7 +5,7 @@ class KeywordQuery < ApplicationQuery
     attr_reader :locations
 
     class << self
-      def call(params = {}, locations =  Location.active)
+      def call(params = {}, locations = Location.active)
         scope = locations
         scope = by_keyword(scope, params[:keyword])
       end

app/views/home/index.html.slim

@@ -1,5 +1,5 @@
 main
-  section class="relative bg-electric-teal hidden" data-controller="banner" data-banner-target="banner"
+  section class="relative hidden bg-electric-teal" data-controller="banner" data-banner-target="banner"
     div class="flex max-w-3xl mx-auto py-7 md:py-8"
       div class="hidden md:block md:pl-4 lg:pl-0"
         = inline_svg_tag 'megaphone.svg', size: '65*70'
@@ -22,8 +22,8 @@ main
       | Search for listings of nonprofit organizations based on your needs.
     = form_with model: @search, url: search_path, method: :get do |f|
       .c-form class="py-0 mx-auto sm:px-3 sm:flex-col sm:justify-center sm:max-w-4xl"
-        div class="relative w-full sm:max-w-xl mb-7 sm:mb-0"
-          = f.text_field :keyword, autocomplete: "search", class:"c-input pl-10 m-0 w-full", placeholder: "Try \"Mental Health Nonprofits\""
+        div class="relative w-full sm:max-w-xl mb-7 sm:mb-0" data-controller="autocomplete"
+          = f.text_field :keyword, autocomplete: "search", class:"c-input pl-10 m-0 w-full", placeholder: "Try \"Mental Health Nonprofits\"", data: { "autocomplete-target": "input", }
           = inline_svg_tag 'search-icon.svg', class:"absolute top-1/3 left-4"
         div
           = f.submit "Search", class:"c-button mx-10 mt-6"
@@ -54,7 +54,7 @@ main
           | Found a nonprofit that meets your needs criteria? Reach out through the contact information provided on their individual profiles.
   section class="flex flex-col items-center px-6 overflow-hidden"
     div class="relative max-w-xl pt-32 mb-14"
-      h2 class="mb-6 text-2xl uppercase text-center font-bold text-gray-2 dark:text-white"
+      h2 class="mb-6 text-2xl font-bold text-center uppercase text-gray-2 dark:text-white"
         | Browse by causes
       p class="text-center"
         | Use our discovery feature to find nonprofits serving your community. 
@@ -93,9 +93,9 @@ main
       h2 class="px-5 pt-20 text-2xl font-bold text-center sm:px-0 md:pt-28 text-blue-dark pb-11"
         | Are you a nonprofit organization interested in joining our listings?
       = link_to 'Add or Claim a Nonprofit', new_nonprofit_request_path, class:'c-button inline-block my-1 text-white bg-blue-dark'
-    div class="top-0 left-0 -z-1 hidden sm:block sm:absolute"
+    div class="top-0 left-0 hidden -z-1 sm:block sm:absolute"
       = inline_svg_tag 'lc-desk-blur-left.svg'
-    div class="top-0 right-0 -z-1 hidden sm:block sm:absolute"
+    div class="top-0 right-0 hidden -z-1 sm:block sm:absolute"
       = inline_svg_tag 'lc-desk-blur-right.svg'
     div class="absolute bottom-0 right-0 -z-1 sm:hidden"
       = inline_svg_tag 'lc-mob-blur-right.svg'

config/routes.rb

@@ -69,5 +69,7 @@
   resource :donate, only: %i[show]
   resource :privacy_policy, only: %i[show]
   resource :infowindow, only: :new
+  resource :autocomplete, only: %i[show]
+
   root to: 'home#index'
 end