Class InputAutoComplete

defines rendering methods for

Export

Hierarchy

  • InputAutoCompleteBase
    • InputAutoComplete

Other

constructor _autoCompleteSuggestions activeSuggestionIndex componentActive disabled inputId inputMode maxSuggestions minInput placeholder required suggestionGenerator suggestionsContainer text value customElementName maxSuggestionsPropertyName minInputPropertyName suggestionGeneratorPropertyName styles clearSuggestionData clearSuggestionSelection close dispatchCustomEvent firstUpdated handleFocus handleKeyDown handleKeyUp handleSuggestionClick handleSuggestionSelection prepareSuggestions render renderSuggestion setActiveSuggestionIndex setSuggestionsContainer updated

attributes

attributeChangedCallback

Other

constructor

  • new InputAutoComplete(): InputAutoComplete

  • Returns InputAutoComplete

Protected_autoCompleteSuggestions

_autoCompleteSuggestions: AutoCompleteSuggestions = ...

exposes the

activeSuggestionIndex

activeSuggestionIndex: number = -1

tracks the active

componentActive

componentActive: boolean = false

when true the input element has received focus

disabled

disabled: boolean = false

LitElement property/attribute determining whether this Web Component is enabled or disabled in the DOM

inputId

inputId: string = ''

LitElement property/attribute for the ID of the input element

inputMode

inputMode: InputModes = 'text'

LitElement property/attribute for the input mode of the input element for OS virtual keyboards

maxSuggestions

maxSuggestions: number = 5

LitElement property/attribute setting the maximum number of

minInput

minInput: number = 0

LitElement property/attribute setting the minimum number of text characters entered before

placeholder

placeholder: string = ''

LitElement property/attribute for the placeholder value of the input element

required

required: boolean = false

LitElement property/attribute determining whether this Web Component value is required

suggestionGenerator

suggestionGenerator: (text: string) => Promise<AutoCompleteSuggestion[]> = ...

LitElement property/attribute for the generation strategy of

suggestionsContainer

suggestionsContainer: null | HTMLUListElement = null

references the auto-complete DOM container of suggestions

text

text: string = ''

LitElement property/attribute for the text displayed in the input element

value

value: string = ''

LitElement property/attribute for the value selected by this Web Component

StaticcustomElementName

customElementName: string = CUSTOM_ELEMENT_NAME

conventional element name of this Web Component

StaticmaxSuggestionsPropertyName

maxSuggestionsPropertyName: string = 'maxSuggestions'

the conventional property name of this.maxSuggestions

StaticminInputPropertyName

minInputPropertyName: string = 'minInput'

the conventional property name of this.minInput

StaticsuggestionGeneratorPropertyName

suggestionGeneratorPropertyName: string = 'suggestionGenerator'

the conventional property name of this.suggestionGenerator

Staticstyles

  • get styles(): CSSResult

  • renders CSS according to LitElement conventions

    Returns CSSResult

clearSuggestionData

clearSuggestionSelection

  • clearSuggestionSelection(clearOnlyValue?: boolean): void

  • clear any

    Parameters

    • clearOnlyValue: boolean = false

    Returns void

close

dispatchCustomEvent

  • dispatchCustomEvent(eventName: string, data: { detail: any }): void

  • emit the custom events of this Web Component

    Parameters

    • eventName: string
    • data: { detail: any }

    Returns void

firstUpdated

  • firstUpdated(
        changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
    ): void

  • conventional LitElement method

    Parameters

    • changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>

    Returns void

handleFocus

  • handleFocus(e: FocusEvent): void

  • handle the focus event of the input element of this Web Component

    Parameters

    • e: FocusEvent

    Returns void

handleKeyDown

  • handleKeyDown(e: KeyboardEvent): Promise<void>

  • handle the keydown event of the input element of this Web Component

    Parameters

    • e: KeyboardEvent

    Returns Promise<void>

handleKeyUp

  • handleKeyUp(e: KeyboardEvent): Promise<void>

  • handle the keyup event of the input element of this Web Component

    Parameters

    • e: KeyboardEvent

    Returns Promise<void>

handleSuggestionClick

  • handleSuggestionClick(suggestionIndex: number): Promise<void>

  • handle the click event of a selected

    Parameters

    • suggestionIndex: number

    Returns Promise<void>

handleSuggestionSelection

  • handleSuggestionSelection(suggestionIndex: number): void

  • handles

    Parameters

    • suggestionIndex: number

    Returns void

prepareSuggestions

  • prepareSuggestions(text: string): Promise<void>

  • prepares

    Parameters

    • text: string

    Returns Promise<void>

render

  • render(): TemplateResult

  • conventional LitElement method

    Returns TemplateResult

renderSuggestion

  • renderSuggestion(data: AutoCompleteSuggestion, index: number): TemplateResult

  • renders

    Parameters

    • data: AutoCompleteSuggestion
    • index: number

    Returns TemplateResult

setActiveSuggestionIndex

  • setActiveSuggestionIndex(key: string): void

  • sets this.activeSuggestionIndex based on the specified Arrow-key input

    Parameters

    • key: string

    Returns void

setSuggestionsContainer

updated

  • updated(
        changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
    ): void

  • conventional LitElement method

    Parameters

    • changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>

    Returns void

attributes

attributeChangedCallback

  • attributeChangedCallback(
        name: string,
        oldVal: null | string,
        newVal: null | string,
    ): void

  • Synchronizes property values when attributes change.

    Specifically, when an attribute is set, the corresponding property is set. You should rarely need to implement this callback. If this method is overridden, super.attributeChangedCallback(name, _old, value) must be called.

    See using the lifecycle callbacks on MDN for more information about the attributeChangedCallback.

    Parameters

    • name: string
    • oldVal: null | string
    • newVal: null | string

    Returns void

Settings

Member Visibility

On This Page

Other
attributes