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 autocompleterClick event, 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
}