import Combobox from "hw_combobox/models/combobox/base" import { startsWith } from "hw_combobox/helpers" Combobox.Autocomplete = Base => class extends Base { _connectListAutocomplete() { if (!this._autocompletesList) { this._visuallyHideListbox() } } _replaceFullQueryWithAutocompletedValue(option) { const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue) this._fullQuery = autocompletedValue this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length) } _autocompleteMissingPortion(option) { const typedValue = this._typedQuery const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue) if (this._autocompletesInline && startsWith(autocompletedValue, typedValue)) { this._fullQuery = autocompletedValue this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length) } } // +visuallyHideListbox+ hides the listbox from the user, // but makes it still searchable by JS. _visuallyHideListbox() { this.listboxTarget.style.display = "none" } get _isExactAutocompleteMatch() { return this._immediatelyAutocompletableValue === this._fullQuery } // All `_isExactAutocompleteMatch` matches are `_isPartialAutocompleteMatch` matches // but not all `_isPartialAutocompleteMatch` matches are `_isExactAutocompleteMatch` matches. get _isPartialAutocompleteMatch() { return !!this._immediatelyAutocompletableValue && startsWith(this._immediatelyAutocompletableValue, this._fullQuery) } get _autocompletesList() { return this.autocompleteValue === "both" || this.autocompleteValue === "list" } get _autocompletesInline() { return this.autocompleteValue === "both" || this.autocompleteValue === "inline" } get _immediatelyAutocompletableValue() { return this._ensurableOption?.getAttribute(this.autocompletableAttributeValue) } }