Skip to main content

<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.


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.


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