StandaloneSearchBox
StandaloneSearchBox
This is for:
DeveloperExample Implementation
standalone-search-box.fn.tsx
import {
buildStandaloneSearchBox,
StandaloneSearchBoxOptions,
} from '@coveo/headless';
import {useEffect, useState, FunctionComponent, useContext} from 'react';
import {AppContext} from '../../context/engine';
import {standaloneSearchBoxStorageKey} from './standalone-search-box-storage-key';
export const StandaloneSearchBox: FunctionComponent<
StandaloneSearchBoxOptions
> = (props) => {
const {engine} = useContext(AppContext);
const controller = buildStandaloneSearchBox(engine!, {options: props});
const [state, setState] = useState(controller.state);
useEffect(() => controller.subscribe(() => setState(controller.state)), []);
function isEnterKey(e: React.KeyboardEvent<HTMLInputElement>) {
return e.key === 'Enter';
}
if (!state) {
return null;
}
if (state.redirectTo) {
const {redirectTo, value, analytics} = state;
const data = JSON.stringify({value, analytics});
localStorage.setItem(standaloneSearchBoxStorageKey, data);
window.location.href = redirectTo;
return null;
}
return (
<div>
<input
value={state.value}
onChange={(e) => controller.updateText(e.target.value)}
onKeyDown={(e) => isEnterKey(e) && controller.submit()}
/>
<ul>
{state.suggestions.map((suggestion) => {
const value = suggestion.rawValue;
return (
<li key={value} onClick={() => controller.selectSuggestion(value)}>
{value}
</li>
);
})}
</ul>
</div>
);
};
// usage
/**
* ```tsx
* <StandaloneSearchBox id="ssb-1" redirectionUrl="/search-page"/>;
* ```
*/
The StandaloneSearchBox
headless controller offers a high-level interface for designing a common search box UI controller. Meant to be used for a search box that will redirect instead of executing a query.
Methods
afterRedirection
Resets the standalone search box state. To be dispatched on single page applications after the redirection has been triggered.
submit
Triggers a redirection.
clear
Clears the search box text and the suggestions.
selectSuggestion
Selects a suggestion and calls submit
.
Parameters
-
value:
string
The string value of the suggestion to select
showSuggestions
Shows the suggestions for the current search box value.
updateText
Updates the search box text value and shows the suggestions for that value.
Parameters
-
value:
string
The string value to update the search box with.
subscribe
Adds a callback that’s invoked on state change.
Parameters
-
listener:
() => void
A callback that’s invoked on state change.
Returns Unsubscribe
: A function to remove the listener.
Attributes
state
A scoped and simplified part of the headless state that is relevant to the StandaloneSearchBox
controller.
Properties
-
analytics:
InitialData | SearchFromLinkData | OmniboxFromLinkData
The analytics data to send when performing the first query on the search page the user is redirected to.
-
redirectTo:
string
The Url to redirect to.
-
isLoading:
boolean
Determines if a search is in progress.
-
isLoadingSuggestions:
boolean
Determines if a query suggest request is in progress.
-
suggestions:
Suggestion[]
The query suggestions for the search box query.
-
value:
string
The current query in the search box.
Initialize
buildStandaloneSearchBox
Creates a StandaloneSearchBox
instance.
Parameters
-
engine:
SearchEngine
The headless engine.
-
props:
StandaloneSearchBoxProps
The configurable
StandaloneSearchBox
properties.
Returns StandaloneSearchBox
StandaloneSearchBoxProps
The configurable StandaloneSearchBox
properties.
Properties
-
options:
StandaloneSearchBoxOptions
StandaloneSearchBoxOptions
Properties
-
redirectionUrl:
string
The default Url the user should be redirected to, when a query is submitted. If a query pipeline redirect is triggered, it will redirect to that Url instead.
-
clearFilters?:
boolean
Whether to clear all active query filters when the end user submits a new query from the search box. Setting this option to "false" is not recommended & can lead to an increasing number of queries returning no results.
-
enableQuerySyntax?:
boolean
Whether to interpret advanced Coveo Cloud query syntax in the query.
Default:
false
-
highlightOptions?:
SuggestionHighlightingOptions
Specifies delimiters to highlight parts of a query suggestion that e.g match, do not match the query.
-
id?:
string
A unique identifier for the controller. By default, a unique random identifier is generated.
-
numberOfSuggestions?:
number
The number of query suggestions to request from Coveo ML (for example,
3
).Using the value
0
disables the query suggest feature.Default:
5
Related Types
Delimiters
Properties
-
close:
string
Closing delimiter
-
open:
string
Opening delimiter
Suggestion
Properties
-
highlightedValue:
string
The suggestion after applying any
highlightOptions
. -
rawValue:
string
The suggestion text.
SuggestionHighlightingOptions
Properties
-
correctionDelimiters?:
Delimiters
Delimiters for substrings that are correction of the input
-
exactMatchDelimiters?:
Delimiters
Delimiters for substrings that are exact match of the input
-
notMatchDelimiters?:
Delimiters
Delimiters for substrings that do not match the input
Unsubscribe
Call signatures
-
(): void