You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.2 KiB
36 lines
1.2 KiB
import { Controller } from '@hotwired/stimulus' |
|
import accessibleAutocomplete from 'accessible-autocomplete' |
|
import 'accessible-autocomplete/dist/accessible-autocomplete.min.css' |
|
import { enhanceOption, suggestion, sort } from '../modules/search' |
|
|
|
export default class extends Controller { |
|
connect () { |
|
const selectEl = this.element |
|
const selectOptions = Array.from(selectEl.options) |
|
const options = selectOptions.map((o) => enhanceOption(o)) |
|
|
|
const matches = /^(\w+)\[(\w+)\]$/.exec(selectEl.name) |
|
const rawFieldName = matches ? `${matches[1]}[${matches[2]}_raw]` : '' |
|
|
|
accessibleAutocomplete.enhanceSelectElement({ |
|
defaultValue: '', |
|
selectElement: selectEl, |
|
minLength: 1, |
|
source: (query, populateResults) => { |
|
if (/\S/.test(query)) { |
|
populateResults(sort(query, options)) |
|
} |
|
}, |
|
autoselect: true, |
|
templates: { suggestion: (value) => suggestion(value, options) }, |
|
name: rawFieldName, |
|
onConfirm: (val) => { |
|
const selectedOption = [].filter.call( |
|
selectOptions, |
|
(option) => (option.textContent || option.innerText) === val |
|
)[0] |
|
if (selectedOption) selectedOption.selected = true |
|
} |
|
}) |
|
} |
|
}
|
|
|