SearchAutoComplete

List of auto completing suggestions based on searched term.

1 min read

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.