Initialization

After installation, you can import and use the library in your JavaScript or TypeScript files. Library attaches to existing search input element. Once a search input is loaded, autocomplete function can initialize event listeners for the Search Autocomplete.

❗autocomplete should be called once.❗

import { useEffect } from "react"
import {
    autocomplete,
    search,
    priceDecorator,
    Autocomplete,
} from "@nosto/autocomplete/react"
import { createRoot } from "react-dom/client"
import "@nosto/autocomplete/styles.css"

let reactRoot = null

export function Search() {
    useEffect(() => {
        autocomplete({
            fetch: {
                products: {
                    fields: [
                        "name",
                        "url",
                        "imageUrl",
                        "price",
                        "listPrice",
                        "brand",
                    ],
                    size: 5,
                },
                keywords: {
                    size: 5,
                    fields: ["keyword", "_highlight.keyword"],
                    highlight: {
                        preTag: `<strong>`,
                        postTag: "</strong>",
                    },
                },
            },
            inputSelector: "#search",
            dropdownSelector: "#search-results",
            hitDecorators: [
                // adds priceText & listPrice fields based on Nosto currency formatting rules
                priceDecorator({ defaultCurrency: "USD" })
            ],
            render: function (container, state) {
                if (!reactRoot) {
                    reactRoot = createRoot(container)
                }

                reactRoot.render(<Autocomplete {...state} />)
            },
            submit: async (query, config, options) => {
                if (query.length >= config.minQueryLength) {
                    const response = await search(
                        {
                            query,
                        },
                        {
                            redirect: true,
                            track: config.nostoAnalytics ? "serp" : undefined,
                            ...options
                        }
                    )
                    // Do something with response. For example, update Search Engine Results Page products state.
                }
            },
        })
    }, [])

    return (
        <form id="search-form">
            <input type="text" id="search" placeholder="search" />
            <button type="submit" id="search-button">
                Search
            </button>
            <div id="search-results" className="ns-autocomplete"></div>
        </form>
    )
}

Property	Required	Default Value	Description
inputSelector	Yes	N/A	Input element to attach the autocomplete to
dropdownSelector	Yes	N/A	Dropdown element to attach the autocomplete to (empty container's selector should be provided)
render	Yes	N/A	Function to render the dropdown
fetch	Yes	N/A	Function to fetch the search state
submit	No	Search API request	Function to submit the search
minQueryLength	No	2	Minimum length of the query before searching (applied on typing in autocomplete and used in default submit implementation)
historyEnabled	No	true	Enables search history component
historySize	No	5	Max number of history items to show
nostoAnalytics	No	true	Enable Nosto Analytics
googleAnalytics	No	{ serpPath: "search", queryParamName: "query", enabled: true }	Google Analytics configuration. Set to false to disable
hitDecorators	No	N/A	Decorate each search hit before rendering