https://www.gll.org/assets/gll_component_library/controllers/debounced_submit_controller-95d90ab7.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="debounced-submit"
4// Attach to a form that renders into a turbo-frame; wire its search input with
5// data-action="input->debounced-submit#submit". Once the value reaches
6// min-length the form is submitted after the debounce; below it, any pending
7// submit is cancelled and the form's target frame is emptied instead.
8export default class extends Controller {
9  static values = {
10    wait: { type: Number, default: 300 },
11    minLength: { type: Number, default: 3 },
12  }
13
14  disconnect() {
15    clearTimeout(this.timer)
16  }
17
18  submit(event) {
19    clearTimeout(this.timer)
20    if (event.target.value.length >= this.minLengthValue) {
21      this.timer = setTimeout(() => this.element.requestSubmit(), this.waitValue)
22    } else {
23      this._clearFrame()
24    }
25  }
26
27  _clearFrame() {
28    const id = this.element.getAttribute("data-turbo-frame")
29    if (id === "_top") return
30    const frame = id ? document.getElementById(id) : this.element.closest("turbo-frame")
31    if (frame) frame.innerHTML = ""
32  }
33}