Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | 5x 5x 5x 117x 89x 89x | import type { SearchQuery } from "@nosto/nosto-js/client"
import { SearchAutocompleteOptions } from "./autocomplete"
import { search } from "./search"
import { HitDecorator } from "./search-js"
/**
* @group Autocomplete
* @category Core
*/
export interface GoogleAnalyticsConfig {
/**
* Path of search page
* @default "/search"
*/
serpPath?: string
/**
* Search query url parameter name
* @default "query"
*/
queryParamName?: string
/**
* Enable Google Analytics
* @default true
*/
enabled?: boolean
}
type Selector = string | Element
/**
* @group Autocomplete
* @category Core
*/
export interface AutocompleteConfig<State> {
/**
* The input element to attach the autocomplete to
*/
inputSelector: Selector
/**
* The dropdown element to attach the autocomplete to
*/
dropdownSelector: Selector | ((input: HTMLInputElement) => Selector)
/**
* The function to use to render the dropdown
*/
render: (container: HTMLElement, state: State) => void | PromiseLike<void>
/**
* Minimum length of the query before searching
*/
minQueryLength?: number
/**
* The function to use to fetch the search state
*/
fetch: SearchQuery | ((input: string) => PromiseLike<State>)
/**
* The function to use to submit the search
*/
submit?: (
query: string,
config: AutocompleteConfig<State>,
options?: SearchAutocompleteOptions
) => void
/**
* Enable history
*/
historyEnabled?: boolean
/**
* Max number of history items to show
*/
historySize?: number
/**
* Enable Nosto Analytics
*/
nostoAnalytics?: boolean
/**
* Google Analytics configuration. Set to `false` to disable.
*/
googleAnalytics?: GoogleAnalyticsConfig | boolean
/**
* Decorate each search hit before rendering
*
* @example
* ```ts
* import { priceDecorator } from "@nosto/autocomplete"
*
* autocomplete({
* hitDecorators: [
* priceDecorator({ defaultCurrency: "USD" })
* ]
* })
* ```
*/
hitDecorators?: HitDecorator[]
}
export const defaultGaConfig = {
serpPath: "/search",
queryParamName: "query",
enabled: true,
}
export function getDefaultConfig<State>() {
return {
minQueryLength: 2,
historyEnabled: true,
historySize: 5,
hitDecorators: [],
nostoAnalytics: true,
googleAnalytics: defaultGaConfig,
submit: (query, config, options) => {
if (
query.length >=
(config.minQueryLength ?? getDefaultConfig<State>().minQueryLength)
) {
search(
{
query,
},
{
redirect: true,
track: config.nostoAnalytics ? "serp" : undefined,
hitDecorators: config.hitDecorators,
...options,
}
)
}
},
} satisfies Partial<AutocompleteConfig<State>>
}
|