Origami Frontend Components & Services

JSDoc: o-autocomplete

CharacterHighlight

Properties

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

Type

Array

Links

PopulateOptions(options)

parameter type default description
options Array.<*> The options which match the rext which was typed into the autocomplete by the user

Returns

  • void

Type

function

Links

Source(query, populateOptions)

parameter type default description
query string Text which was typed into the autocomplete by the user
populateOptions PopulateOptions Function to call when ready to update the suggestions dropdown

Returns

  • void

Type

function

Links

MapOptionToSuggestedValue(option)

parameter type default description
option * The option to transform into a suggestion string

Returns

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

Type

function

Links

onConfirm(option)

parameter type default description
option * The option the user selected

Returns

  • void

Type

function

Links

AutocompleteOptions

Properties

  • 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

highlightSuggestion(suggestion, query)

Global Function

parameter type default description
suggestion string Text which is going to be suggested to the user
query string Text which was typed into the autocomplete by the user

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

createLoadingContainer

Global Function

Create DOM for the loading container.

Returns

  • HTMLDivElement - The loading container.

Links

showLoadingPane(instance)

Global Function

Show the loading panel

parameter type default description
instance Autocomplete The autocomplete instance whose loading panel should be shown

Returns

  • void

Links

hideLoadingPane(instance)

Global Function

Hide the loading panel

parameter type default description
instance Autocomplete The autocomplete instance whose loading panel should be hidden

Returns

  • void

Links

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>

parameter type default description
id string The id of the autocomplete input to associate the clear button with

Returns

  • HTMLButtonElement - The clear button DOM tree

Links

initClearButton(instance)

Global Function

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

parameter type default description
instance Autocomplete The autocomplete instance to setup the clear button for

Returns

  • void

Links

new Autocomplete(autocompleteEl, options)

Class constructor.

parameter type default description
autocompleteEl (optional) HTMLElement The component element in the DOM
options (optional) AutocompleteOptions {} An options object for configuring the component

Methods

Properties

Links

<anonymous>~customSource

Inner Property

Type

  • Source

Links

Autocomplete#mapOptionToSuggestedValue

Instance Property

Type

  • MapOptionToSuggestedValue

Links

Autocomplete#options.source(query, populateOptions)

Static Method

parameter type default description
query string Text which was typed into the autocomplete by the user
populateOptions PopulateOptions Function to call when ready to update the suggestions dropdown

Returns

  • void

Links

Autocomplete#options.source~callback(options)

Inner Function

parameter type default description
options Array.<string> The options which match the rext which was typed into the autocomplete by the user

Returns

  • void

Links

templates.suggestion(option)

Static Method

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

parameter type default description
option * The suggestion to apply the template with.

Returns

  • string - HTML string to represent a single suggestion.

Links

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.

parameter type default description
option * The suggestion which was selected.

Returns

  • string - String to represent the suggestion.

Links

Autocomplete#suggestionTemplate(suggestedValue)

Instance Method

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

parameter type default description
suggestedValue string The suggestion to apply the template with.

Returns

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

Links

<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

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.

parameter type default description
autocompleteEl HTMLElement The component element in the DOM

Returns

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

Links

Autocomplete.init(rootElement, options)

Static Method

Initialise o-autocomplete component/s.

parameter type default description
rootElement HTMLElement | string The root element to intialise the component in, or a CSS selector for the root element
options (optional) object {} An options object for configuring the component

Returns

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

Links

new Autocomplete(autocompleteEl, options)

Class constructor.

parameter type default description
autocompleteEl (optional) HTMLElement The component element in the DOM
options (optional) AutocompleteOptions {} An options object for configuring the component

Methods

Properties

Links

Status
active
Switch component view

GitHub: o-autocomplete@1.6.1

Install o-autocomplete

If using the Build Service, add o-autocomplete@^1.6.1 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-autocomplete@^1.6.1".

Help & Support

o-autocomplete is maintained directly by the Origami team. If you have any questions about o-autocomplete or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com