useAutosuggest

Overview

The useAutosuggest hook enables the creation of an autosuggest component that provides suggestions based on a given query.

Usage

import { useAutosuggest } from "@unbxd-ui/react-search-hooks";

Code Example

import { useAutosuggest } from "@unbxd-ui/react-search-hooks";
 
const SearchComponent = ({ autosuggest }) => {
	const { AutosuggestComponent } = autosuggest;
	const { autosuggestQuery, setAutosuggestQuery } = useAutosuggest(autosuggest);
 
	const handleSearch = (event) => {
		setAutosuggestQuery(event.target.value);
	};
 
	return (
		<div>
			<input type="text" value={query} onChange={handleSearch} placeholder="Search for products..." />
			<AutosuggestComponent />
		</div>
	);
};

Hook API

Parameters

• A boolean that determines whether the autosuggest component should be enabled.
• Default value: false.

• The delay in milliseconds before the API call is made.
• Default value: 0.

• The minimum number of characters required in the query before initiating the API call.

• Default value: 3.

• It is an object that contains additional configurations for trending searches.
• Further Configs:
  • enabled: A boolean that determines whether the trending search API call should be made.
  • count: The number of trending search suggestions to display.
• Default value:

trendingSearches: {
    enabled: true,
    count: 6
}

• It is an object that contains additional configurations for inFields suggestions.
• Further Configs:
  • enabled: A boolean that determines whether the inFields suggestions should be enabled.
  • count: The number of Infields suggestions to display.
  • prefetch: A boolean that determines whether the search call for inFields suggestions should be made while typing the query itself or no call at all should go.
  • filterField: The field name that needs to passed as filter in the api call.
  • noOfInfields: The number of Infields suggestions to display.
• Default value:

inFields: {
	enabled: true,
    count: 2,
    prefetch: false,
    filterField: "category",
    noOfInfields: 2
}

• It is an object that contains additional configurations for topQueries suggestions.
• Further Configs:
  • enabled: A boolean that determines whether the top queries suggestions should be enabled.
  • count: The number of top queries suggestions to display.
  • prefetch: A boolean that determines whether the search call for top queries suggestions should be made while typing the query itself or no call at all should go.
• Default value:

topQueries: {
    enabled: true,
    count: 2,
    prefetch: false
}

• It is an object that contains additional configurations for keywordSuggestions suggestions.
• Further Configs:
  • enabled: A boolean that determines whether the keyword suggestions should be enabled.
  • count: The number of keyword suggestions to display.
  • prefetch: A boolean that determines whether the search call for keyword suggestions should be made while typing the query itself or no call at all should go.
• Default value:

keywordSuggestions: {
    enabled: true,
    count: 2,
    prefetch: false
}

• It is an object that contains additional configurations for keywordSuggestions suggestions.
• Further Configs:
  • enabled: A boolean that determines whether the popular products suggestions should be enabled.
  • count: The number of popular products suggestions to display.
  • fields: It is an array that specifies the field names to be fetched for popular products.
• Default value:

popularProducts: {
    enabled: true,
    count: 3,
    fields: []
}

• It is an object that contains additional configurations for promotedSuggestions suggestions.
• Further Configs:
  • enabled: A boolean that determines whether the promoted suggestions should be enabled.
  • count: The number of promoted suggestions to display.
  • prefetch: A boolean that determines whether the search call for promoted suggestions should be made while typing the query itself or no call at all should go.
• Default value:

promotedSuggestions: {
    enabled: true,
    count: 3,
    prefetch: false
}

Return Values

• This represents the current query in the state that has been entered for autosuggest suggestions.

• This is a function that updates the autosuggest query in the state.

• This is an object that provides responses for keywordSuggestions, popularProducts, inFields, promotedSuggestions, topQueries, and trendingSearches.

• This boolean defines if the component is in loading state or not.

• Maps each autosuggest query to its corresponding array of popular products.

• This is the function that can be used to make a search api call.
• Following parameters can be passed while invoking fetchSearchData in an object:
  • query: Current query for which the call needs to be made.
  • filter: The value of the field name that needs to passed as filter in the api call.
• Usage:

fetchSearchData({query: "red", filter: "red shirt"});

Use Cases

SearchBoxSummary