Sha256: 7a2b1f2a0156b0f5ee4a795d671c22de77f6b419116f0a8525fccb665ef60e34
Contents?: true
Size: 1.27 KB
Versions: 12
Compression:
Stored size: 1.27 KB
Contents
import { Controller } from "@hotwired/stimulus"
import debounce from "https://esm.sh/lodash.debounce@4.0.8?standalone"
import Combobox from "https://esm.sh/@github/combobox-nav@3.0.1?standalone"
export default class extends Controller {
static targets = [ "input", "list" ]
static classes = [ "active", "selected" ]
initialize() {
this.filter = debounce(this.filter.bind(this), 300)
}
connect() {
this.combobox = new Combobox(this.inputTarget, this.listTarget)
}
disconnect() {
this.combobox.destroy()
}
start() {
this.combobox.start()
}
stop() {
this.combobox.stop()
}
filter({ target }) {
this.#reset()
if (target.value != "") {
this.#selectMatches(target.value)
this.#activate()
} else {
this.#deactivate()
}
}
#reset() {
this.listTarget.querySelectorAll(`.${this.selectedClass}`).forEach(element => {
element.classList.remove(this.selectedClass)
})
}
#selectMatches(value) {
this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach(element => {
element.classList.add(this.selectedClass)
})
}
#activate() {
this.listTarget.classList.add(this.activeClass)
}
#deactivate() {
this.listTarget.classList.remove(this.activeClass)
}
}
Version data entries
12 entries across 12 versions & 1 rubygems