autosubmit_controller.ts

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
  static values = { event: String };

  declare readonly eventValue?: string;

  connect(): void {
    this.element.addEventListener(this.eventName, this.onChange);
  }

  disconnect(): void {
    this.element.removeEventListener(this.eventName, this.onChange);
  }

  private get eventName(): string {
    return this.eventValue || 'input';
  }

  private onChange(event: InputEvent): void {
    (event.target as HTMLInputElement).form.requestSubmit();
  }
}

search.html.slim

= form_with url: root_path, local: true, method: :get, class: "navbar__item--search__form", data: { turbo: false, controller: "form combobox", "form-url": search_search_suggestions_path, action: "invalid->form#hideValidationMessage:capture" } do |f|
  = f.search_field :query, class: "input input__input input--search", value: params[:query], placeholder: t(".search.placeholder", total_videos_count: number_with_delimiter(@videos_total)), autocomplete: "off", spellcheck: "false", required: true, data: { action: "focus->combobox#start input->form#submit", "combobox-target": "input", "form-target": "input" }
  = f.button name: "", class: "button button--secondary button--search" do
    .icon.icon--magnifying-glass
  div id="desktop-search_results" class="search_results" target="_top" data-combobox-target="window" class="isHidden" data-action="click@window->combobox#stop"
    ul role="listbox" data-combobox-target="list"