SearchstaxInputWidget for Angular

The SearchStax Site Search solution offers an Angular input widget to assist with you custom search page.

The SearchstaxInputWidget component for Angular provides a search input with autosuggest/autocomplete functionality.

Usage

Import the component:

import { SearchstaxInputWidget } from '@searchstax-inc/searchstudio-ux-angular';

Add it to the template:

<app-searchstax-input></app-searchstax-input>

Inputs

  • afterAutosuggest: Callback function triggered after autosuggest request completes. Used to modify autosuggest response before rendering suggestions.
  • beforeAutosuggest: Callback function triggered before autosuggest request. Used to modify autosuggest request parameters.
  • searchInputId: ID of the search input element. Default is ‘searchstax-search-input’.
  • suggestAfterMinChars: Minimum number of characters required to trigger autosuggest. Default is 3.
  • templateOverride: TemplateRef to override the default UI template.

Methods

  • onMouseLeave(): Resets autosuggest selection highlight.
  • onMouseOver(): Highlights autosuggestion on mouseover.
  • onMouseClick(): Selects highlighted autosuggestion.

Template Binding Properties

The templateOverride template provides the following context properties:

  • suggestions: Array of autosuggestion objects.
  • onMouseLeave: Method to reset autosuggest highlight.
  • onMouseOver: Method

See Example of Input Widget for Angular

Questions?

Do not hesitate to contact the SearchStax Support Desk.