Authorization
API Resources
NL Interpreter
Search
Benti
Typeahead Autocomplete
Overview
Use the Typeahead Autocomplete to suggest contents according a query.
In order to update the suggestion that the typeahead autocomplete shows, there are different options:
- Link it to a search-box component, which updates the typeahead autocomplete each time the user types something.
- Update the query with
setQuery(this requires that you add an input listener to track the user input).
To do something when users click on a suggestion, there are different options:
- Link a results component to the typeahead autocomplete: this connects the results component to the typeahead autocomplete suggestion that is clicked.
- Listen to the
autocompleterClickevent, which sends the content id of the clicked suggestion.
Usage
How to create this component.
var autocompleter = sdk.component('autocompleter', target:String, options:Object);Sample
By default, this component looks like this:
Target
This is the HTML component. For example, the "#inbenta" target is:
<div id="inbenta"></div>Options
Available options to set in this component
| Name | Type | Default | Description |
|---|---|---|---|
| maxItems | integer | 5 | Max number of items in the typeahead autocomplete |
| preLoad (deprecated) | boolean | false | Defines whether the typeahead autocomplete data is loaded at the beginning (preload true) or if it waits until the moment the typeahead autocomplete is about to be used. |
Methods
Methods can be used in this component.
| Name | Description |
|---|---|
setQuery(query: String) |
Set the query parameter to show suggestions for that query. |
linkToSearchBox(component: Component) |
Link a search-box component to this component. When the search-box is submitted, the query is emptied. When the input in search-box changes, the setQuery method is called. |
setAutocompleterDataInterceptor(interceptor:function) |
Set a typeahead autocomplete interceptor. |
Use method example
Set query 'a' to the typeahead autocomplete component. This will match with all the content which has an 'a'.
var autocompleter = sdk.component('autocompleter', '#autocompleter');
autocompleter.setQuery('a');Subcomponents
This component does not have any subcomponent.
Events
Events to listen on this component.
| Name | Event data | Description |
|---|---|---|
| autocompleterClick | contentId The id of the clicked content. |
Triggers when a suggested content is clicked. This event is tracked automatically. This event hides the typeahead autocomplete and empties the search-box input when it is linked with the linkToSearchBox method. |
Event example
Do something when event autocompleterClick is emitted.
var autocompleter = sdk.component('autocompleter', '#autocompleter');
autocompleter.$on('autocompleterClick', function (contentId) {
// Do something awesome
});Tracking
This component calls the API endpoint /tracking/events to register an autocompleter_click event when a user clicks on a content.
Example
How to use the typeahead autocomplete in different ways.
// Instantiate the typeahead autocomplete component
const autocompleter = sdk.component('autocompleter', '#autocompleter');
// Linking with an input
// Link with a SearchBox component
const searchBox = sdk.component('searchBox', '#autocompleter');
autocompleter.linkToSearchBox(searchBox);
// Link with a standard HTML input
var searchBoxInput = document.getElementById('myInput');
if(searchBoxInput)
{
//onkeyup show autocompleter if it has results
searchBoxInput.addEventListener('keyup', event => {
autocompleter.setQuery(event.target.value);
if(autocompleter.hits){
autocompleter.show();
}
});
//on click redirect to faqs URL
autocompleter.$on('autocompleterClick', autocompleterCallback);
}else{
throw new Error(`Input myInput doesn't exist`);
}
// Linking with results
// Link with a Results component
const results = sdk.component('results', '#results');
results.linkToAutocompleter(autocompleter);
// Listening for the autocompleterClick event
autocompleter.$on('autocompleterClick', function(contentId) {
// do stuff
}