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>
)
}
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
Last updated
Was this helpful?