Class AutocompleteComponent

The Autocomplete component displays a preview of search results after a user begins to type a query in the SearchFieldComponent.

Tag

The tag for this component is <hawksearch-autocomplete>.

Event-Binding Attributes

Categories
Name Value
hawksearch-category-field field
hawksearch-category-field value

Content Results
Name Value
hawksearch-content id

When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that content item.

Product Results
Name Value
hawksearch-product id

When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that content item.

Query Results (Popular Queries)
Name Value
hawksearch-query query

When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that product.

View All Results
Name Value
hawksearch-view-all

When an element with this attribute is clicked, a new search will be executed with the query entered in the search box.

Default Template

The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point. {@embed ./autocomplete.component.hbs}

Hierarchy

Properties

bindFromEvent componentName contentModel? data? defaultHtml handlebars

Accessors

configuration rootElement

Methods

bindChildElements getContentModel interpolate onRender registerHelpers render renderContent

Properties

Protected bindFromEvent

bindFromEvent: boolean = true

Protected componentName

componentName: keyof HawkSearchComponents = 'autocomplete'

Protected Optional contentModel

contentModel?: AutocompleteComponentModel

The data bound to the Handlebars template.

Optional data

data?: AutocompleteResponse

The data bound to the component.

Protected defaultHtml

defaultHtml: any = defaultHtml

Protected handlebars

handlebars: typeof Handlebars = HawkSearch.handlebars

The Handlebars reference shared by all HawkSearch components.

Accessors

Protected configuration

  • get configuration(): undefined | TConfig

  • The optional configuration object for this component.

    Returns undefined | TConfig

rootElement

  • get rootElement(): ParentNode

  • The root element which should be used for querying any child elements. This resolves to this.shadowRoot if the Shadow DOM is enabled, otherwise this.

    Returns ParentNode

Methods

Protected bindChildElements

  • After the component is rendered, this method is called to bind any child components.

    Returns void

Protected getContentModel

Protected interpolate

  • Replaces placeholders in a given string with values from a data object.

    Returns

    The template string with all placeholders replaced by the values specified in values.

    Parameters

    • template: string

      The template string.

    • values: Record<string, string>

      The object containing properties which will be bound to template.

    Returns string

Protected onRender

  • After the component is rendered, this method is called for any additional processing (such as attaching event listeners) which needs to occur.

    Returns void

Protected registerHelpers

  • Optional method that can be overwritten to register Handlebars helper functions which can be accessed from the template. For more information, see Custom Helpers.

    Returns void

render

Protected renderContent

  • Determines whether the data meets the necessary conditions to perform data binding and render content.

    Returns

    Whether the component should be rendered. If false, the component will have empty contents and be set to display: none;.

    Returns boolean

Settings

Member Visibility

Theme