Authorization
API Resources
NL Interpreter
Search
Assist
Search Box
Overview
This component provides a text input with a submit button, so the user can launch searches with new queries. This component can also have different properties and methods and you can attach an autocomplete component to it to enhance its performance.
This component must be linked to a search Store, since it launches a new search when clicked on the "Submit" button.
Usage
This is how you create this component:
sdk.component('search-box', target: HTMLElement|String, options: Object);Sample
By default, this component looks like this:
Options
The following options can be set in this component:
| Name | Type | Default | Description | |
|---|---|---|---|---|
| autofocus1 | Boolean | false |
Use this to focus the cursor on the input field automatically when the page loads | |
| autocompleter | Object | Boolean | {} |
Use this option to create and attach a typeahead autocomplete component. Set the value to false to disable the typeahead autocomplete. To see available options, see Typeahead Autocomplete. |
|
| searchCallback | Function | (query) => true |
Use this option to listen to or do any processing before a query is made with query as parameter". If it returns true, the query is made. If it does not, the query is not made. |
1 Note that if you use autofocus, the page may send the /auth loading request depending on the SDK implementation. This may impact your rate limits.
Methods
The following methods can be used in this component:
| Name | Description |
|---|---|
getInputElement() : HTMLInputElement |
Get the input element |
setAutocompleter(component: AutocompleterComponent/SemanticAutocompleterComponent) |
Set the given autocomplete instance as the default autocomplete |
Tracking
This component does a new search when submitting the query, using the endpoint POST /federated-searches. This search is bound to the current session.
Labels
| Name | Default | Description |
|---|---|---|
| SEARCH_BOX_PLACEHOLDER | Your question here |
The text for the placeholder |
Examples
Example using the results component Store through the linkTo method:
<div id="target"></div>
<script>
var searchBox = sdk.component('search-box', '#target', {
autofocus: true,
autocompleter: false
});
var results = sdk.component('results', document.createElement('div'));
results.linkTo(searchBox);
</script>Example adding a custom autocompleter component:
<div id="target"></div>
<script>
var searchBox = sdk.component('search-box', '#target', {
autofocus: true
});
var results = sdk.component('results', document.createElement('div'));
results.linkTo(searchBox);
var autocompleter = sdk.component('autocompleter', document.createElement('div'))
searchBox.setAutocompleter(autocompleter)
</script>Example adding a custom semantic autocomplete:
<div id="target"></div>
<script>
var searchBox = sdk.component('search-box', '#target', {
autofocus: true
});
var results = sdk.component('results', document.createElement('div'));
results.linkTo(searchBox);
var autocompleter = sdk.component('semantic-autocompleter', document.createElement('div'))
searchBox.setAutocompleter(autocompleter)
</script>Example using searchCallback property (results component Store through the linkTo) :
<div id="target"></div>
<script>
var searchBox = sdk.component('search-box', '#target', {
autofocus: true,
autocompleter: false,
searchCallback: function(query) {
switch (query) {
// If query is misspelled as 'inventa' change the query to 'inbenta'
case 'inventa':
searchBox.searchStore.query = "inbenta"
return false
// Continue as normal for any other query
default:
return true
}
}
});
var results = sdk.component('results', document.createElement('div'));
results.linkTo(searchBox);
</script>