Class Controller

Controller

The Autocomplete Controller class acts as the public class which you may wield to enable address autocomplete on your HTML address forms

When instantiated, the controller will serve as a bridge beteen the address suggestion view presented on the DOM and the Ideal Postcodes Address resolution HTTP APIs

The role of the controller is to bind to events produced by the user interface and take appropriate action including querying the API, modifying other aspects of the DOM.

Hierarchy

  • Controller

Properties

alerts announce blurListener cache client container context contextSuggestions countryIcon countryInput countryListener countryMessage countryToggle current document focusListener fsm ids input inputListener inputStyle keydownListener list mainComponent message notification options outputScope placeholderCache retrieveSuggestions scope suggestions toolbar unhide unhideEvent

Methods

applySuggestion ariaContract ariaExpand attach close closed createUnhide detach goToCurrent hideFields init opened populateAddress query renderContexts renderSuggestions setMessage setQueryOptions setResolveOptions setSuggestions unhideFields unmountUnhide

Properties

alerts

alerts: HTMLDivElement

Reference to alerts container

announce

announce: Announce

Reference to accessibility announcer

blurListener

blurListener: Listener<"blur">

Input blur event listener

cache

cache: ApiCache

Address Finder API cache

client

client: Client

Ideal Postcodes API Client

container

container: HTMLDivElement

Reference to container wrapping AddressFinder elements DOM element. This includes the main component, input fields and WAI-ARIA controls

context

context: string

Current search context

contextSuggestions

contextSuggestions: ContextDetails[]

Current list of context suggestions

countryIcon

countryIcon: HTMLSpanElement

Reference to country icon

countryInput

countryInput: null | HTMLInputElement | HTMLSelectElement

Reference to input DOM element

countryListener

countryListener: Listener<"change">

Country form input change listener

countryMessage

countryMessage: HTMLSpanElement

Reference to country toggle message

countryToggle

countryToggle: HTMLSpanElement

Reference to country select toggle button

current

current: number

Index of current elem in list selected

document

document: Document

Reference to the DOM, to which this.scope belongs

focusListener

focusListener: Listener<"focus">

Input focus event listener

fsm

fsm: ViewService

Address Finder state machine

ids

ids: IdGen

ID generation method

input

input: HTMLInputElement

Reference to input DOM element

inputListener

inputListener: Listener<"input">

Input element input event listener

inputStyle

inputStyle: null | string

Caches input style prior to Address Finder attachment

keydownListener

keydownListener: Listener<"keydown">

Input keydown event listener

list

list: HTMLUListElement

Reference to Address Suggestion list DOM element

mainComponent

mainComponent: HTMLDivElement

Reference to inner container wrapping list and toolbar

message

message: HTMLLIElement

Reference to Address Finder message DOM element

notification

notification: string

Current notification to be shown to user

options

options: StoredOptions

Caches options

outputScope

outputScope: Document | HTMLElement

Scopes the DOM for fields which should receive address inputs

placeholderCache

placeholderCache: undefined | string

Caches previous placeholder value for input

retrieveSuggestions

retrieveSuggestions: DebouncedFunc<RetrieveSuggestions>

Debounced method used to retrieve suggestions

scope

scope: Document | HTMLElement

Scopes the DOM for the entire controller

suggestions

suggestions: AddressSuggestion[]

Current list of address suggestions

toolbar

toolbar: HTMLDivElement

Reference to toolbar at bottom of finder list

unhide

unhide: HTMLElement

Reference to clickable Unhide link

unhideEvent

unhideEvent: Listener<"click">

Unhide click event listener

Methods

applySuggestion

  • Resolves a suggestion to full address and apply results to form

    Parameters

    • suggestion: AddressSuggestion

    Returns Promise<Controller>

ariaContract

  • Marks aria component as closed

    Returns void

ariaExpand

  • Marks aria component as opened

    Returns void

attach

  • Adds Address Finder to DOM

    • Wraps input with container
    • Appends suggestion list to container
    • Enables listeners
    • Starts FSM

    Returns Controller

close

  • Close address finder

    Parameters

    • reason: CloseReason = "blur"

    Returns void

closed

  • Returs false if address finder is closed

    Returns boolean

createUnhide

  • Creates a clickable element that can trigger unhiding of fields

    Returns HTMLElement

detach

  • Removes Address Finder from DOM

    • Disable listeners
    • Removes sugestion list from container
    • Appends suggestion list to container
    • Enables listeners
    • Stops FSM

    Returns Controller

goToCurrent

  • Updates current li in list to active descendant

    Returns void

hideFields

  • Hides fields marked for hiding

    Returns void

init

  • Attaches Controller to the DOM.

    If checkKey is enabled, a key check will be performed prioer to binding. Use the onLoaded and onFailedCheck callbacks to define follow up behaviour if the key check succeeds or fails

    Returns Promise<void>

opened

  • Returns true if address finder is open

    Returns boolean

populateAddress

  • Writes a selected to the input fields specified in the controller config

    Parameters

    • address: AnyAddress

    Returns void

query

  • Returns current address query

    Returns string

renderContexts

  • Render available country options

    Returns void

renderSuggestions

  • Render current address suggestions

    Returns void

setMessage

  • Sets message as a list item, no or empty string removes any message

    Parameters

    • notification: string

    Returns Controller

setQueryOptions

  • Applies new query options to search. This process clears the existing cache to prevent stale searches

    Parameters

    • options: QueryOptions

    Returns void

setResolveOptions

  • Applies new query options to search. This process clears the existing cache to prevent stale searches

    Parameters

    • options: ResolveOptions

    Returns void

setSuggestions

  • Set address finder suggestions

    Parameters

    • suggestions: AddressSuggestion[]
    • query: string

    Returns Controller

unhideFields

  • Unhides fields marked for hiding

    Returns void

unmountUnhide

  • Removes unhide elem from DOM

    Returns void

Settings

Member Visibility

Theme

On This Page