SearchBox

Overview

The "Search Box" in an e-commerce page is a user interface element that allows users to quickly and easily search for specific products within an online store's catalog.

Usage

// importing component
import { SearchBox } from "@unbxd-ui/react-search-components";
 
// import styles for the component
import "@unbxd-ui/react-search-components/styles/searchbox.css";
import "@unbxd-ui/react-search-components/styles/autosuggest.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/searchbox.css");
require.resolve("@unbxd-ui/react-search-components/styles/autosuggest.css");

Live Demo

1. Searchbox without autosuggest

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { SearchBox, Products, Summary, FixedPagination } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SearchBox showSubmitButton={true} submitOnEnter={true} debounce={true} delay={2000} />
	<Summary />
	<Products />
	<FixedPagination />
	...
</UnbxdSearchWrapper>

2. Searchbox with autosuggest

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { SearchBox, Products, Summary, FixedPagination } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<SearchBox showSubmitButton={true} submitOnEnter={true} debounce={true} delay={2000} showClear={true} autosuggest={{ enabled: true }} />
	<Summary />
	<Products />
	<FixedPagination />
	...
</UnbxdSearchWrapper>

Props

• The placeholder for the search input element.
• Default Value: "Enter the search query..".

• Boolean value which indicates if the label for the search input element must be shown or not.
• Default Value: false.

• The text must be shown as the label for the search input element.
• Default Value: "".

• Boolean value which indicates if products for entered query must be fetched on pressing the "Enter" key.
• Default Value: false.

• Boolean value which indicates if the search button must be shown or not.
• Default Value: true.

• The text that must be shown in the submit query button.
• Default Value: "Search".

• Boolean value which indicates if there must be a minimum delay between submitting the query and making the API call for the submitted query.
• Ensure that both showSubmitButton and submitOnEnter are turned off for this functionality to work.
• delay must be provided, otherwise a default delay of 0 will be applied.
• Default Value: false.

• The time in milliseconds between submitting the new query and firing the API call for this query.
• Default Value: 0.

• Turn this boolean to true if you want the api call to trigger even when you hit the same query. If this is turned to false, then for the same query , multiple calls will not happen.
• Default Value: false.

• Turn this boolean to true if you want to show a clear button on searchbox. This clear button on click , clears out the searchbox and throws an api call for "*" query.
• Default Value: false.

• The component used to display the clear button, which clears the query in the searchbox.
• Default Value:

const ClearBtnComponent = () => {
	return <>Clear</>;
};

• A function that will be called when the query in the searchbox changes.

• A function to handle the search box focus event.

• A function to handle the search box blur event.

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	root: "searchbox-root", // used for the wrapper element
	label: "searchbox-label", // used for the label
	input: "searchbox-input", // used for the input element
	clearButton: "search-clear-btn", // used for the clear button
	submitButton: "searchbox-btn" // used for the submit button
}}

• An object which contains the configuration for the autosuggest feature.

• Following further configurations can be passed to the object:

  • enabled

    boolean
    • Enables autosuggest feature for the searchbox input.
    • Default Value: false.

  • AutosuggestComponent

    functional component
    • It is the component which is passed by the user to render the autosuggest.
    • Default Value:

    const AutosuggestComponent = ({ autosuggest, response }) => {
        const { LoaderComponent } = autosuggest
        const { loading, autosuggestQuery = "", response: { trendingSearches, popularProducts, keywordSuggestions }, fetchSearchData, searchResults } = response;
     
        const [hoveredQuery, setHoveredQuery] = useState(autosuggestQuery)
        const [products, setProducts] = useState(popularProducts)
     
        const handleKeywordHover = (suggestion: string) => {
            if (hoveredQuery !== suggestion) {
                if (searchResults[suggestion]) {
                    setHoveredQuery(suggestion);
                    setProducts(searchResults[suggestion])
                } else {
                    fetchSearchData({ query: suggestion })
                }
            }
            setHoveredQuery(suggestion)
        }
     
        useEffect(() => {
            // initially, we need to show the popularProducts for user query then we need to show the products of hovered query
            if (hoveredQuery.length > 0) {
                if (searchResults[hoveredQuery]) {
                    setProducts(searchResults[hoveredQuery])
                }
                else {
                    setProducts(popularProducts)
                }
            } else {
                setProducts(popularProducts)
            }
        }, [searchResults])
     
        useEffect(() => {
            // this is required for title and hover function trigger
            setHoveredQuery(autosuggestQuery)
        }, [autosuggestQuery])
     
        useEffect(() => {
            // this is required for the initial onFocus
            if (hoveredQuery === autosuggestQuery) {
                setProducts(popularProducts)
            }
        }, [popularProducts])
     
        if (loading) {
            return <div className="autosuggest-wrapper">
                <LoaderComponent />
            </div>
        }
        return <div className="autosuggest-wrapper">
            {trendingSearches.length > 0 && autosuggestQuery === "" && <TrendingQueries headerText="Trending Queries:" trendingQueries={trendingSearches} />}
            {autosuggestQuery !== "" && <>
                {products.length > 0 && <PopularProducts headerText={`Popular Products:`} autosuggestQuery={hoveredQuery} products={products} />}
                {keywordSuggestions.length > 0 && <KeywordSuggestions headerText="Keyword Suggestions:" keywordSuggestions={keywordSuggestions} onHover={handleKeywordHover} hoveredQuery={hoveredQuery} />}
                {(products.length === 0 && keywordSuggestions.length === 0) && <AutosuggestNoResult autosuggestQuery={hoveredQuery} />}
            </>}
        </div>
    }

  • NoResultsComponent

    functional component
    • It is a React component provided by the user to render the UI when no results are returned for the query.
    • Default Value:

    const AutosuggestNoResult = ({ autosuggestQuery }) => {
    	return <div className="no-results">No results found for "{autosuggestQuery}"</div>;
    };

  • LoaderComponent

    functional component
    • It is a React component provided by the user to render a loader while the suggestion box is in a loading state.
    • Default Value:

    const AutosuggestLoader = () => {
    	return <div className="autosuggest-loader">Loading...</div>;
    };

  • onItemClick

    functional component
    • The function executed when a user interacts with an autosuggested product or suggestion by clicking.

  • minChars

    number
    • It is the minimum number of characters required to trigger the API call.
    • Default Value: 3.

  • extraParams

    object
    • It is an object used to include additional payload in the API request.
    • Default Value: {}.

  • trendingSearches

    object

    • It is an object that contains additional configurations for trending searches.

    • Default Value:

      trendingSearches = {
      	enabled: true,
      	count: 6
      }

    • Further Configs:

      • enabled

        boolean
        • A boolean that determines whether the trending search API call should be made.
        • Default Value: true.

      • count

        number
        • The number of trending search suggestions to display.
        • Default Value: 6.

      • HeaderComponent

        functional component
        • This custom component serves as the Trending Searches block header, but only if the default Trending Searches component is being displayed.

      • Component

        functional component
        • A user-provided component for customizing the Trending Searches block.

  • popularProducts

    object

    • It is an object that contains additional configurations for popular products suggestions.

    • Default Value:

      popularProducts = {
      	count: 3,
      	fields: []
      }

    • Further Configs:

      • enabled

        boolean
        • A boolean that determines whether the popular products must be fetched and displayed.
        • Default Value: true.

      • count

        number
        • The number of popular products suggestions to display.
        • Default Value: 3.

      • fields

        string array

      • It is an array that specifies the field names to be fetched for popular products.

      • Default Value: [].

      • HeaderComponent

        functional component

      • This custom component serves as the Popular products block header, but only if the default Popular products component is being displayed.

      • Component

        functional component

      • A user-provided component for customizing the Popular products block.

  • keywordSuggestions

    object

    • It is an object that contains additional configurations for keyword suggestions.

    • Default Value:

      keywordSuggestions = {
      	count: 2,
      	prefetch: false
      }

    • Further Configs:

      • enabled

        boolean
        • A boolean that determines whether the keyword suggestions must be fetched and displayed.
        • Default Value: true.

      • count

        number
        • The number of keyword suggestions to display.
        • Default Value: 2.

      • prefetch

        boolean
        • 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: false.

      • HeaderComponent

        functional component
        • This custom component serves as the Keyword suggestions block header, but only if the default keyword suggestions component is being displayed.

      • Component

        functional component
        • A user-provided component for customizing the Keyword suggestions block.

  • topQueries

    object

    • It is an object that contains additional configurations for top queries suggestions.

    • Default Value:

      topQueries = {
      	count: 2,
      	prefetch: false
      }

    • Further Configs:

      • enabled

        boolean
        • A boolean that determines whether the top queries suggestions must be fetched and displayed.
        • Default Value: true.

      • count

        number
        • The number of top queries suggestions to display.
        • Default Value: 2.

      • prefetch

        boolean
        • 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: false.

      • HeaderComponent

        functional component
        • This custom component serves as the Top queries block header, but only if the default top queries component is being displayed.

      • Component

        functional component
        • A user-provided component for customizing the Top queries block.

  • inFields

    object

    • It is an object that contains additional configurations for inFields suggestions.

    • Default Value:

      inFields = {
      	count: 2,
      	prefetch: false,
      	noOfFields: 2,
      	filterField: "category"
      }

    • Further Configs:

      • enabled

        boolean
        • A boolean that determines whether the inFields suggestions must be fetched and displayed.
        • Default Value: true.

      • count

        number
        • The number of inFields suggestions to display.
        • Default Value: 2.

      • prefetch

        boolean
        • 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.
        • Default Value: false.

      • noOfFields

        number
        • The number of infields for which the products need to be fetched and displayed.
        • Default Value: 2.

      • filterField

        string
        • The key in the API response from which we get the infield values.
        • Default Value: "category".

      • HeaderComponent

        functional component
        • This custom component serves as the Infields block header, but only if the default infields component is being displayed.

      • Component

        functional component
        • A user-provided component for customizing the Infields block.

  • promotedSuggestions

    object

    • It is an object that contains additional configurations for promoted suggestions.

    • Default Value:

      promotedSuggestions = {
      	count: 3,
      	prefetch: false
      }

    • Further Configs:

      • enabled

        boolean
        • A boolean that determines whether the promoted suggestions must be fetched and displayed.
        • Default Value: true.

      • count

        number
        • The number of promoted suggestions to display.
        • Default Value: 3.

      • prefetch

        boolean
        • 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: false.

Related Hooks

To use the Unbxd React Search SDK without the pre-built SearchBox component, add the search functionality to your custom component using the useQuery hook and add the autosuggest functionality using the useAutosuggest hook. Refer to the documentation for more details.