Autosuggest Component

Note: Autosuggest functionality is integrated with the SearchBox component. You cannot use autosuggest components independently - they must be configured through the SearchBox component's autosuggest prop.

Basic Setup & Configuration

1. How do I import and use autosuggest components?

To use autosuggest functionality, import the SearchBox component from @unbxd-ui/react-search-components:

import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-components";
import { SearchBox } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchCSRWrapper>
	<SearchBox
		autosuggest={{
			enabled: true,
			// other configurations
		}}
	/>
</UnbxdSearchCSRWrapper>;

The SearchBox component is designed to be used within the UnbxdSearchCSRWrapper or UnbxdSearchSSRWrapper components.

2. What are the different types of autosuggest suggestions available?

The autosuggest system supports six types of suggestions:

Trending Searches: Popular search queries from other users
Popular Products: Product suggestions based on popularity
Keyword Suggestions: Query completion suggestions
Top Queries: Most searched terms
In-Fields: Category-specific suggestions
Promoted Suggestions: Sponsored or promoted search terms

3. How do I configure the minimum characters required to trigger autosuggest?

Use the minChars prop to set the minimum number of characters before autosuggest triggers:

<SearchBox
	autosuggest={{
		enabled: true,
		minChars: 2, // Trigger after 2 characters (default is 3)
	}}
/>

4. How do I configure different autosuggest suggestion types?

You can configure multiple suggestion types including trending searches, popular products, keyword suggestions, top queries and in-field suggestions. Here's an example configuration with trending searches:

<SearchBox
	autosuggest={{
		enabled: true,
		// Trending searches - show popular queries when search is empty
		trendingSearches: {
			enabled: true,
			count: 6, // Number of trending searches to show
			Component: CustomTrendingComponent, // Optional custom component
			HeaderComponent: CustomHeader, // Optional custom header
		},
	}}
/>

Each suggestion type can be enabled independently and configured with custom components, counts, and behavior options. For detailed configuration options, click here to view the autosuggest documentation.

5. What if I don't want to show Popular Products?

If you don't want to display Popular Products in the autosuggest, you can disable this feature in the configuration by setting the popularProducts > enabled option to false. This will prevent Popular Products from appearing in the suggestions. Similar configuration for other doctypes can be done. For more details, click here to view the autosuggest documentation.

Each suggestion configuration allows you to use a CustomComponent for customization. You can create your own custom component and pass it to the configuration. For more details, click here to view the autosuggest documentation.

7. How does prefetching work in autosuggest?

Prefetching allows certain suggestion types to load data while the user types. Click here to view the details on prefetch.

When prefetch: true: Search API calls are made as the user types
When prefetch: false: Search API calls are made only when suggestions are needed
Applies to: keywordSuggestions, topQueries, inFields, and promotedSuggestions

8. How do I customize the loader for autosuggest?

To customize the loader for autosuggest, you can provide a custom loading component in the configuration. This allows you to display a unique loading indicator while suggestions are being fetched. Click here to view the details on LoaderComponent.

9. How do I handle no results in autosuggest?

Handling no results in autosuggest involves creating a custom component to display when no suggestions are found. This can enhance user experience by providing alternative actions or messages. Click here to view the details on NoResultsComponent.

Styling Customization

1. Do the React Search SDK provide any styling for the autosuggest component, and how do I import it?

Yes, we provide default styling for the autosuggest component. You can import the styles directly into your project to ensure consistent design.

import "@unbxd-ui/react-search-components/styles/autosuggest.css";

Events & callbacks

1. What all callbacks are there to handle user interactions?

Autosuggest provides onItemClick and onItemHover callbacks to manage user interactions effectively.

onItemClick: The function executed when a user interacts with an autosuggested product or suggestion by clicking.
onItemHover : The function executed when a user hover over an autosuggested product or suggestion.

Click here to know more about the callbacks.

Searchbox Sort