Search Auto Complete

List of auto completing suggestions based on searched term. This component is part of the Search feature.

Import

Import the component from @faststore/ui

import { SearchAutoComplete, SearchAutoCompleteTerm } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss'
  @import '@faststore/ui/src/components/atoms/Link/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-auto-complete`

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-auto-complete-term`
linkProps	`Partial<LinkProps<LinkElementType>>`	Props for the link from term component.
icon	`string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.	`<Icon name="MagnifyingGlass" width={18} height={18} />`
term*	`string`	Term researched.
suggestion*	`string`	Suggestion proposed with auto complete.

Local token	Default value/Global token linked
`--fs-search-auto-complete-padding-top`	`var(--fs-spacing-2)`
`--fs-search-auto-complete-padding-right`	`var(--fs-spacing-3)`
`--fs-search-auto-complete-padding-bottom`	`var(--fs-search-auto-complete-padding-top)`
`--fs-search-auto-complete-padding-left`	`var(--fs-search-auto-complete-padding-right)`

`--fs-search-auto-complete-transition-property`	`var(--fs-transition-property)`
`--fs-search-auto-complete-transition-function`	`var(--fs-transition-function)`
`--fs-search-auto-complete-transition-timing`	`var(--fs-transition-timing)`

Local token	Default value/Global token linked
`--fs-search-auto-complete-item-column-gap`	`var(--fs-spacing-1)`
`--fs-search-auto-complete-item-text-size`	`var(--fs-text-size-2)`
`--fs-search-auto-complete-item-line-height`	`1.25`
`--fs-search-auto-complete-item-bkg-color-hover`	`var(--fs-color-tertiary-bkg-hover)`

Local token	Default value/Global token linked
`--fs-search-auto-complete-item-icon-color`	`var(--fs-color-neutral-4)`
`--fs-search-auto-complete-item-icon-size`	`1.125rem`

For further customization, you can use the following data attributes:

data-fs-search-auto-complete

data-fs-search-auto-complete-item

data-fs-search-auto-complete-item-link

data-fs-search-auto-complete-item-icon