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" data-autocomplete-url-value="<%= autocomplete_index_path %>" role="combobox">
     <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>
@@ -14,10 +14,14 @@ bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:
       placeholder: "Try \"Mental Health Nonprofits\"",
       data: {
         action: "input->search#displayClearKeywordButton",
-        search_target: "keywordInput"
+        search_target: "keywordInput",
+        autocomplete_target: "input",
       }
     ) %>
 
+      <ul class="absolute w-full px-1 bg-white rounded-sm" data-autocomplete-target="results" role="listbox">
+      </ul>
+
     <button
     type="button"
     class="absolute inset-y-0 right-0 px-3 <%= "hidden" unless params.dig('search', 'keyword').present? %>"

app/controllers/autocomplete_controller.rb

@@ -0,0 +1,13 @@
+class AutocompleteController < ApplicationController
+  skip_before_action :authenticate_user!
+
+  include Pundit
+
+  skip_after_action :verify_policy_scoped
+  skip_after_action :verify_authorized
+
+  def index
+    @suggestions = Tag.suggestions(params[:q])
+    render layout: false
+  end
+end

app/javascript/controllers/index.js

@@ -4,10 +4,12 @@
 import { Application } from "@hotwired/stimulus"
 import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
 import Carousel from 'stimulus-carousel'
+import { Autocomplete } from "stimulus-autocomplete"
 
 
 const application = Application.start()
 application.register('carousel', Carousel)
+application.register('autocomplete', Autocomplete)
 const context = require.context("controllers", true, /_controller\.js$/)
 const contextComponents = require.context("../../components", true, /_controller\.js$/)
 application.load(

app/models/tag.rb

@@ -11,5 +11,16 @@
 #  updated_at      :datetime         not null
 #
 class Tag < ApplicationRecord
+  include PgSearch::Model
   belongs_to :organization
+
+  pg_search_scope :search_suggestions, against: :name,
+                                       using: {
+                                         tsearch: { prefix: true },
+                                         trigram: { threshold: 0.2 }
+                                       }
+
+  def self.suggestions(term)
+    search_suggestions(term).pluck(:name).uniq.map(&:downcase)
+  end
 end

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/autocomplete/index.html.erb

@@ -0,0 +1,5 @@
+<% @suggestions.each do |suggestion| %>
+  <li role="option" class="px-1 rounded-sm cursor-pointer hover:bg-blue-medium hover:text-white">
+    <%= suggestion %>
+  </li>
+<% 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,9 @@ 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" data-autocomplete-url-value=autocomplete_index_path role="combobox"
+          = f.text_field :keyword, autocomplete: "search", class:"c-input pl-10 m-0 w-full", placeholder: "Try \"Mental Health Nonprofits\"", data: { "autocomplete-target": "input" }
+          ul class="absolute w-full px-1 bg-white rounded-sm" data-autocomplete-target="results" role="listbox"
           = 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 +55,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 +94,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
+  resources :autocomplete, only: %i[index]
+
   root to: 'home#index'
 end

package.json

@@ -17,6 +17,7 @@
     "moment": "^2.29.4",
     "postcss": "^8",
     "selectize": "0.12.4",
+    "stimulus-autocomplete": "^3.1.0",
     "stimulus-carousel": "^4.0.0",
     "stimulus-use": "^0.50.0-2",
     "swiper": "6.8.4",