JSDoc: o-autocomplete

CharacterHighlight

Properties

• 0 - (type: string) the character in the suggestion
• 1 - (type: boolean) should it be highlighted?

Type

Array

Links

• "CharacterHighlight" typedef on Github

PopulateOptions(options)

Returns

• void

Type

function

Links

• "PopulateOptions" typedef on Github

Source(query, populateOptions)

Returns

• void

Type

function

Links

• "Source" typedef on Github

MapOptionToSuggestedValue(option)

Returns

• string - The string to display as the suggestions for this option

Type

function

Links

• "MapOptionToSuggestedValue" typedef on Github

onConfirm(option)

Returns

• void

Type

function

Links

• "onConfirm" typedef on Github

AutocompleteOptions

Properties

• defaultValue - (type: string) Specify a string to prefill the autocomplete with
• source - (type: Source) The function which retrieves the suggestions to display
• mapOptionToSuggestedValue - (type: MapOptionToSuggestedValue) Function which transforms a suggestion before rendering
• onConfirm - (type: onConfirm) Function which is called when the user selects an option

Type

object

Links

• "AutocompleteOptions" typedef on Github

highlightSuggestion(suggestion, query)

Global Function

Returns

• Array.<CharacterHighlight> - An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.

Links

• "highlightSuggestion" function on Github

createLoadingContainer

Global Function

Create DOM for the loading container.

Returns

• HTMLDivElement - The loading container.

Links

• "createLoadingContainer" function on Github

showLoadingPane(instance)

Global Function

Show the loading panel

Returns

• void

Links

• "showLoadingPane" function on Github

hideLoadingPane(instance)

Global Function

Hide the loading panel

Returns

• void

Links

• "hideLoadingPane" function on Github

createClearButton(id)

Global Function

Create the DOM tree which corresponds to <button class="o-autocompleteclear" type="button" aria-controls=${autocompleteEl.id} title="Clear input"> <span class="o-autocompletevisually-hidden">Clear input</span> </button>

Returns

• HTMLButtonElement - The clear button DOM tree

Links

• "createClearButton" function on Github

initClearButton(instance)

Global Function

Attach the clear button and corresponding event listeners to the o-autocomplete instance

Returns

• void

Links

• "initClearButton" function on Github

new Autocomplete(autocompleteEl, options)

Class constructor.

Methods

• suggestionTemplate(suggestedValue) - (instance) Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.
• getDataAttributes(autocompleteEl) - (static) Get the data attributes from the AutocompleteElement. If the element is being set up declaratively, this method is used to extract the data attributes from the DOM.
• init(rootElement, options) - (static) Initialise o-autocomplete component/s.

Properties

• mapOptionToSuggestedValue - (type: MapOptionToSuggestedValue)

Links

• "Autocomplete" class on Github

<anonymous>~customSource

Inner Property

Type

• Source

Links

• "customSource" constant on Github

Autocomplete#mapOptionToSuggestedValue

Instance Property

Type

• MapOptionToSuggestedValue

Links

• "mapOptionToSuggestedValue" member on Github

Autocomplete#options.source(query, populateOptions)

Static Method

Returns

• void

Links

• "source" function on Github

Autocomplete#options.source~callback(options)

Inner Function

Returns

• void

Links

• "callback" function on Github

templates.suggestion(option)

Static Method

Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.

Returns

• string | undefined - HTML string to represent a single suggestion.

Links

• "suggestion" function on Github

templates.inputValue(option)

Static Method

Used when a suggestion is selected, the return value of this will be used as the value for the input element.

Returns

• string | undefined - String to represent the suggestion.

Links

• "inputValue" function on Github

Autocomplete#suggestionTemplate(suggestedValue)

Instance Method

Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.

Returns

• string - HTML string to be represent a single suggestion.

Links

• "suggestionTemplate" function on Github

<anonymous>~characters

Inner Property

Type

• Array.<CharacterHighlight>

An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.

Links

• "characters" constant on Github

Autocomplete.getDataAttributes(autocompleteEl)

Static Method

Get the data attributes from the AutocompleteElement. If the element is being set up declaratively, this method is used to extract the data attributes from the DOM.

Returns

• object - An options object which can be used for configuring the component

Links

• "getDataAttributes" function on Github

Autocomplete.init(rootElement, options)

Static Method

Initialise o-autocomplete component/s.

Returns

• Autocomplete | Array.<Autocomplete> - The newly constructed Autocomplete components

Links

• "init" function on Github