<hx-search-assistance> v0.6.0+ HelixUI v0.6.0 or later required

The custom <hx-search-assistance> element contains a list of choices for the user, such as recent or suggested searches depending on their context.

Permitted Parents: any
Permitted Children: flow content
Events: Any of the following:

close

open

reposition

scroll (Emitted from document as a CustomEvent instance.)

Attributes

Attributes enable declarative configuration of an element, via HTML markup.

open (optional): Opens the search assistance
position (optional): Positions the search assistance
relative-to (optional): ID of an element that the search assistance is positioned relative to.

Properties

JavaScript properties enable programmatic access to an element's configuration and state.

controlElement {HTMLElement} read-only

Returns the first HTML element whose aria-controls attribute matches the ID of the <hx-search-assistance>.

The control element is used to attach various DOM event listeners, in order to determine when to show or hide the <hx-search-assistance>.

open {Boolean [false]}

Indicates whether or not the <hx-search-assistance> should be displayed.

optimumPosition {String|undefined}

Optimum position determined by internal positioning algorithm.

It will return undefined if <hx-search-assistance> hasn't been repositioned.

position {String [bottom-start]}

Configures the position of the <hx-search-assistance>, in relation to its relative element.

Reflects the position attribute.

relativeElement {HTMLElement} read-only

HTML element used as a point of reference for calculating the fixed position of the <hx-search-assistance>.

If the relative-to attribute is defined, this will return the first element whose ID matches the relativeTo property. Otherwise, it will return the value of controlElement.

relativeTo {String}

A string corresponding to the ID of the relative element.

Reflects the relative-to attribute.

See Also