combobox_controller.html.erb

import { Controller } from "@hotwired/stimulus"
import Combobox from '@github/combobox-nav'

// Connects to data-controller="combobox"
export default class extends Controller {
  static get targets() { return [ "input", "list" ] }

  disconnect() {
      this.combobox?.destroy()
    }

  listTargetConnected() {
      this.start()
    }

  start() {
      this.combobox?.destroy()
      this.combobox = new Combobox(this.inputTarget, this.listTarget)
      this.combobox.start()
    }

  stop() {
      this.combobox.destroy()
      this.combobox?.stop()
    }
}

form_controller.js

import { Controller } from "@hotwired/stimulus"
import debounce from "lodash.debounce"

// Connects to data-controller="form"
export default class extends Controller {
  static get targets() { return [ "submit" ] }

  submit() {
    this.submitTarget.click()
  }

  connect() {
      // this.submitTarget.hidden = true
  }

  initialize() {
      this.submit = debounce(this.submit.bind(this), 200)
  }

  hideValidationMessage(event) {
    event.stopPropagation()
    event.preventDefault()
  }
}

header.html.erb

<div class="autocompleteContainer" data-controller="combobox">
      <%= form_with url: search_suggestions_path(turbo_frame: "search_results"), method: :get,
        data: { "turbo-frame": "search_results",
                   controller: "form",
                       action: "invalid->form#hideValidationMessage:capture
                                input->form#submit" },
                                class: "searchBarContainer" do |f| %>
       <%= f.search_field :query, class: "searchBar",
                                  value: params[:query],
                                  placeholder: "Search #{number_with_delimiter(@videos_total)} videos...",
                                  data: { action: "focus->combobox#start
                                                   focusout->combobox#stop",
                                                   "combobox-target": "input" },
                                  autocomplete: "off" %>
       <%= f.button fa_icon("search"), class: "searchButton", "data-form-target": "submit" %>
        <turbo-frame id="search_results" target="_top" class="empty:hidden peer-invalid:hidden">
          <ul role="listbox" data-combobox-target="list"></ul>
        </turbo-frame>
      <% end %>
      </div>

index.html.erb

<turbo-frame id="search_results">
  <ul role="listbox" data-combobox-target="list">
    <% @search_results.each_with_index do |result, index| %>
    <li>
      <%= link_to highlight(result, params[:query], :highlighter => '<b>\1</b>'), root_path(query: result.parameterize(separator: " ")), role: "option", id: "search_result_#{index}" %>
    </li>
    <% end %>
  </ul>
</turbo-frame>

search_suggestions_controller.rb

class SearchSuggestionsController < ApplicationController
  def index
    @leaders =
      Leader
        .joins(:videos)
        .distinct
        .full_name_search(params[:query])
        .limit(10)
        .pluck(:name)

    @followers =
      Follower
        .joins(:videos)
        .distinct
        .full_name_search(params[:query])
        .limit(10)
        .pluck(:name)

    @songs =
      Song
        .joins(:videos)
        .distinct
        .full_title_search(params[:query])
        .limit(10)
        .map(&:full_title)

    @channels = Channel.title_search(params[:query]).limit(10).pluck(:title)

    @search_results =
      [@leaders + @followers + @songs + @channels].flatten
        .uniq
        .first(10)
        .map(&:titleize)
  end
end