_search_results.html.erb

<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>

form_controller.js

import { Controller } from "@hotwired/stimulus"
import debounce from "lodash.debounce"
import { FetchRequest } from "@rails/request.js"

export default class extends Controller {
  static get targets() { return [ "submit", "input" ] }

    async submit () {
      const url = this.data.get("url");
      const request = new FetchRequest('post', `${url}?query=${this.inputTarget.value}`)
      const response = await request.perform()
      if (response.ok) {
        console.log(response.text)
      }
      // this.submit = debounce(this.submit.bind(this), 200)
      // this.submitTarget.click()
    }


  search(event) {
    if (!!this.inputTarget.value) {
      const url = `/?query=${this.inputTarget.value}`
      Turbo.visit(url)
    }
  }

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

  initialize() {

  }

  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,
        class: "searchBarContainer",
        data: { controller: "form",
                    action: "invalid->form#hideValidationMessage:capture",
                    "form-url": search_search_suggestions_path } 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
                                                   keyup->form#submit",
                                          "combobox-target": "input",
                                          "form-target": "input" } %>
       <%= f.button fa_icon("search"), class: "isHidden", "data-form-target": "submit" %>
       <%#= button_tag fa_icon("search"), class:"searchButton", "data-action": "click->form#search" %>
        <div id="search_results">
          <ul role="listbox" data-combobox-target="list" data-action="submit->combobox#stop"></ul>
        </div>
      <% end %>
      </div>

search_suggestions_controller.rb

class SearchSuggestionsController < ApplicationController
  def search
    @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)

    # return if params[:query].blank?
    @search_results =
      [@leaders + @followers + @songs + @channels].flatten
        .uniq
        .first(10)
        .map(&:titleize)

    # render json: @search_results
    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: [
          turbo_stream.update("search_results",
          partial: "search_suggestions/search_results",
          locals: { search_results: @search_results })
        ]
      end
    end
  end
end