SearchAutoComplete

List of auto completing suggestions based on searched term.

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

Example

Code

Searching for: Appl

Usage


_10import { SearchAutoComplete, SearchAutoCompleteTerm } from "@faststore/ui";

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";

Example

Code

Searching for: So

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`

You can target and override SearchAutoComplete styles using 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

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.