Autosuggest
ready
The Autosuggest component enhances the search experience by dynamically presenting relevant suggestions in a flyout panel as the user types into the search input. This flyout appears directly beneath the search field and updates in real-time, offering predictive results based on user input, recent searches, popular queries, and contextual relevance.
Loading
Code
HTML
import { NbhdAutosuggest } from '@fbin-web/neighborhood-core';<nbhd-autosuggest max-breadcrumbs="4" max-products="4" max-categories="3" max-category-items="3" term="products">
</nbhd-autosuggest>React
import { NbhdAutosuggest } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdAutosuggest
maxBreadcrumbs={4}
maxProducts={4}
maxCategories={3}
maxCategoryItems={3}
term="products"></NbhdAutosuggest>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
breadcrumbs
|
BreadcrumbData[]
|
Array of breadcrumb data to display at the top of the autosuggest panel. | ||
products
|
ProductCardElement[]
|
Array of product data to display in the results section. | ||
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
The background style for the component. |
categories
|
ListData[]
|
Array of category data with nested items to display. | ||
term
|
term
|
string
|
The search term to display in the message and button. | |
message
|
message
|
string
|
Search results for
|
The message text displayed before the search term. |
ctaLabel
|
cta-label
|
string
|
See more results for
|
The label for the call-to-action button. |
maxCategories
|
max-categories
|
number
|
3
|
Maximum number of categories to display. |
maxCategoryItems
|
max-category-items
|
number
|
5
|
Maximum number of items to display per category. |
maxBreadcrumbs
|
max-breadcrumbs
|
number
|
4
|
Maximum number of breadcrumb items to display. |
maxProducts
|
max-products
|
number
|
4
|
Maximum number of products to display. Adjusts dynamically based on container width. |
Breadcrumb Data Structure
The BreadcrumbData interface defines the structure for individual breadcrumb items.
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | The display text for the breadcrumb item. |
href
|
string
|
No | The URL the breadcrumb item should link to. If omitted, the item will be rendered as plain text. |
Product Card Structure
The ProductCardElement interface defines the structure for individual product cards displayed in the autosuggest results.
| Property | Type | Required | Description |
|---|---|---|---|
href
|
string
|
No | The URL the product card should link to. |
external
|
boolean
|
No | Whether the link should open in a new tab/window. |
mainImage
|
Media
|
No | The primary image for the product. Media interface: { src: string, alt: string, type: 'image' | 'video', class?: string, crop?: CropPosition }. |
secondaryImage
|
Media
|
No | The secondary image for the product, shown on hover. |
media
|
Media
|
No | The product media content (alias for mainImage). |
mediaSecondary
|
Media
|
No | The secondary product media content (alias for secondaryImage). |
title
|
string
|
No | The product title or name. |
model
|
string
|
No | The product model number or identifier. |
price
|
string
|
No | The product price as a formatted string. |
exclusive
|
string
|
No | Exclusive designation or special label for the product. |
discontinued
|
boolean
|
No | Whether the product has been discontinued. |
status
|
BadgeVariants | string
|
No | The product status badge. BadgeVariants: 'default' | 'sale' | 'sold out' | 'discontinued'. |
Categories Structure
The ListData interface defines the structure for category groups and their items displayed in the autosuggest panel.
| Property | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | The category title or heading displayed above the list items. |
items
|
ListItem[]
|
Yes | Array of list items within this category group. |
List Item Data Structure
The ListItem interface defines the structure for individual items within category lists.
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | The display text for the list item. |
href
|
string
|
No | The URL the list item should link to. If omitted, the item will be rendered as plain text. |
external
|
boolean
|
No | Whether the link should open in a new tab/window. |
cssClass
|
string
|
No | Additional CSS class to apply to the list item. |
Events
| Name | Description | Event Detail |
|---|---|---|
autosuggest-see-more
Deprecated
|
Emitted when the 'See more results' button is clicked. Deprecated in favor of 'nbhd-autosuggest-see-more' for consistency. | { term: string } |
nbhd-autosuggest-see-more
|
Emitted when the 'See more results' button is clicked. | { term: string } |
nbhd-autosuggest-click
|
Emitted when any link is clicked within the autosuggest panel (category links, product cards, or breadcrumbs). | { from: string, term: string, label: string, item?: ListItem, product?: ProductCardElement, href?: string, originalEvent: Event } |
Slots
| Name | Description |
|---|---|
breadcrumb
|
Custom breadcrumb content to display at the top of the autosuggest panel. |
categories
|
Custom categories content to display lists of categorized links. |
results
|
Custom results content to display product cards and search results. |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
container
|
The main container element. |
wrapper
|
The inner wrapper containing all content sections. |
search-message
|
The search message text displaying the search term. |
results
|
The results section wrapper. |
product-card
|
Individual product card elements in the results. |
list
|
List elements used for categories. |
category-item
|
Individual category item links or text elements. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-autosuggest-display
|
block |
--nbhd-autosuggest-inlineSize
|
100% |
--nbhd-autosuggest-maxInlineSize
|
100% |
--nbhd-autosuggestWrapper-display
|
grid |
--nbhd-autosuggestWrapper-gap
|
var(--nbhd-space-4, 16px) |
--nbhd-autosuggestWrapper-gridTemplateAreas
|
"breadcrumb" "categories" "results" |
--nbhd-autosuggestWrapper-gridTemplateColumns
|
1fr |
--nbhd-autosuggestWrapper-paddingBlock
|
var(--nbhd-space-4, 16px) |
--nbhd-autosuggestBreadcrumb-paddingInline
|
var(--nbhd-space-4) |
--nbhd-autosuggestBreadcrumb-paddingBlock
|
var(--nbhd-space-2) |
--nbhd-autosuggestBreadcrumb-gridArea
|
breadcrumb |
--nbhd-autosuggestBreadcrumb-inlineSize
|
100% |
--nbhd-autosuggestBreadcrumb-flexDirection
|
column |
--nbhd-autosuggestBreadcrumb-alignItems
|
flex-start |
--nbhd-autosuggest-breadcrumbItem-color
|
inherit |
--nbhd-autosuggest-breadcrumbItem-fontWeight
|
var(--nbhd-fontWeight-600) |
--nbhd-autosuggestCategories-display
|
none |
--nbhd-autosuggestCategories-gridArea
|
categories |
--nbhd-autosuggestCategories-paddingInline
|
var(--nbhd-space-4) var(--nbhd-space-0) |
--nbhd-autosuggestCategoriesSection-display
|
block |
--nbhd-autosuggest-categoriesItem-color
|
inherit |
--nbhd-autosuggest-categoriesItem-fontWeight
|
var(--nbhd-fontWeight-600) |
--nbhd-autosuggest-categoriesItem-marginBlock
|
0 var(--nbhd-space-05) |
--nbhd-autosuggestResults-gridArea
|
results |
--nbhd-autosuggestResults-inlineSize
|
100% |
--nbhd-autosuggestResults-paddingInline
|
0 |
--nbhd-autosuggestResultsGrid-display
|
grid |
--nbhd-autosuggestResultsGrid-gap
|
var(--nbhd-space-1,4px) |
--nbhd-autosuggestResultsGrid-columnTemplate
|
repeat(2, .5fr) |
--nbhd-autosuggestResultsGrid-justifyContent
|
center |
--nbhd-autosuggestResultsGrid-justifyItems
|
center |
--nbhd-autosuggestSearchTerm-marginBlock
|
0.5rem 0 |
--nbhd-autosuggestSearchTerm-paddingInline
|
0 |
Dependencies
This component contains the following components as dependencies.