The typeahead autocomplete component (formerly known as "autocompleter") predicts a list of title results based on the characters typed by the user on a search box.
This component must be linked to a search Store, since it is able to use the filters defined in the store to filter the suggestions.
This is how you create this component:
sdk.component('autocompleter', target: HTMLElement|String, options: Object);
By default, this component looks like this:
The following options can be set in this component:
Name | Type | Default | Description |
---|---|---|---|
baseUrl | String | "" |
URL to add to all of the result links |
behaveAsPopover | Boolean | false | If set to true , the typeahead autocomplete behaves as a popover. This means that the results container floats over the other page elements. This feature uses the popper library. Inbenta recommends that you set this option to true . |
filters | Boolean | false |
Whether to filter the results using the store refinements |
maxResults | Number | 5 | Set the number of results you want to display. |
modifiers | Object | bottom-start | The popup modifiers. See popper.js placements docs for valid values. This option only works if behaveAsPopover parameter is set to true |
placement | String | bottom-start | The popup placement. See popper.js placements docs for valid values. This option only works if behaveAsPopover parameter is set to true |
preload | Boolean | true |
Whether to preload the typeahead autocomplete data. If false is provided, the data is retrieved when the user starts typing. |
settingsToShow | Array | [] |
Lets you add the attributes that appear in each typeahead autocomplete results. (For example, if you add the URL, the URL appears in the typeahead autocomplete results.) Important: You must check the "Use for autocompleter" option in the attribute. |
showViewAllButton | Boolean | true |
Defines whether the button view all appears. Use this button to show all the results from the query within the Search box. |
source | String | The URL to fetch the typeahead autocomplete data. Will default to endpoint autocompleter/data , if not provided. |
|
target | String | "_blank" |
Use this to specify a target for the typeahead autocomplete content. |
templates | Object | The templates to override the default render behavior. Caution: Be aware that using the templates option modifies any display behaviour of the typeahead autocomplete, such as different styles on the selected item, hovering styling, etc. |
|
templates.footer | String | () => String | Footer template | |
templates.header | String | () => String | Header template | |
templates.item | String | (Object) => String | Template to use for each result. This template will receive an object containing the result. See Item Template below for additional details. | |
transformData | Function | (object) => object |
Function to transform the object passed to the view |
viewAllButtonHref | String | # |
URL of the main results page. The query is set in the URL as a query parameter in order to load the results. |
Property | Description |
---|---|
suggestion |
Get the current active content |
cursor |
Get the current suggestion position |
The following methods can be used in this component:
Method | Description |
---|---|
setQuery(query: String) |
Set the current query |
setInputElement(input: HTMLElement) |
Listen to the given input element to automate certain actions: - Listen to input changes and update the query. - Show the typeahead autocomplete results when focused. - Navigate the typeahead autocomplete results with the vertical arrow keys. - Open a new tab when a result is selected and enter is pressed. |
trackClick(content: Object, openURL: bool = true, target: String = "_blank") |
Track a click to the given content and open the URL |
blur() |
Hides the typeahead autocomplete results, if they are showing |
focus() |
Opens the typeahead autocomplete results, if it has results and they are hidden |
The item
template receives a typeahead autocomplete result, enhanced with additional parameters. It uses this format:
{
id: 1,
repr: "Example content",
highlighted_repr: "<b>Example</b> content",
URL: ["/contents/1"],
PARAGRAPHS: ["Paragraph 1"],
// Any other attributes marked with ‘Use for autocompleter’
// Use this to render the absolute content URL.
__url: "https://test.io/contents/1",
// Render this into an HTML element to track click events.
__clickable: "..."
}
This component calls the API to trigger the autocompleter_click
event when a user clicks (left or right-click) on a content. This is logged in atomic logs with the log type AUTOCOMPLETER, and in session logs with a CLICK_AUTOCOMPLETER data key.
Events to listen on this component.
Name (data key) | Description |
---|---|
autocompleter_click | When a user clicks on a suggestion from the typeahead autocomplete, it triggers a autocompleter_click event. |
This component uses the following labels:
Name | Default | Description |
---|---|---|
AUTOCOMPLETER_VIEW_ALL_BUTTON | View all contents |
The text for the view all button |
Basic usage
<div style="position: relative">
<input type="text" id="query">
<div id="autocompleter"></div>
</div>
<script>
var autocompleter = sdk.component('autocompleter', '#autocompleter', {
settingsToShow: ['description'],
viewAllButtonHref: 'https://cars-ecommerce.com',
});
var input = document.querySelector('#query');
autocompleter.setInputElement(input);
input.addEventListener('keypress', function (event) {
// Track clicks and open URLs.
if (autocompleter.suggestion && event.keyCode === 13) {
autocompleter.trackClick(autocompleter.suggestion);
}
});
// This step is necessary to allow the typeahead autocomplete to fetch the data.
var results = sdk.component('results', document.createElement('div'));
results.linkTo(autocompleter);
</script>
Enable filtering
<div style="position: relative">
<input type="text" id="query">
<div id="autocompleter"></div>
</div>
<script>
var autocompleter = sdk.component('autocompleter', '#autocompleter', {
settingsToShow: ['description']
viewAllButtonHref: 'https://cars-ecommerce.com',
// Tell the autocompleter to filter the results
// using the rules defined in the search store.
filters: true,
});
var input = document.querySelector('#query');
autocompleter.setInputElement(input);
// This step is necessary to allow the typeahead autocomplete to fetch the data.
var results = sdk.component('results', document.createElement('div'));
results.linkTo(autocompleter);
// Define some filters: display results with red or blue colors only.
results.searchStore.addFacet('color', 'or');
results.searchStore.addFacetRefinement('color', 'red');
results.searchStore.addFacetRefinement('color', 'blue');
</script>
<div style="position: relative">
<input type="text" id="query">
<div id="autocompleter"></div>
</div>
<script>
var autocompleter = sdk.component('autocompleter', '#autocompleter', {
templates: {
item: '<a class="inbenta-search-autocompleter__link" href="{{ __url }}" {{{ __clickable }}}>'
+ '<div class="inbenta-search-autocompleter__link__setting inbenta-search-autocompleter__link__setting-title">'
+ '{{ repr }} ({{ id }})'
+ '</div>'
+ '</a>'
}
});
var input = document.querySelector('#query');
autocompleter.setInputElement(input);
//Adding hovering effect to the template item
input.addEventListener('keyup', function (e) {
if(e.keyCode == 38 || e.keyCode == 40) {
var items = document.getElementsByClassName("inbenta-search-autocompleter__link");
[].forEach.call(items, function(el, i) {
if (i == autocompleter.cursor) {
el.classList.add("inbenta-search-autocompleter__link--active");
} else {
el.classList.remove("inbenta-search-autocompleter__link--active");
}
});
}
});
// This step is necessary to allow the typeahead autocomplete to fetch the data.
var results = sdk.component('results', document.createElement('div'));
results.linkTo(autocompleter);
</script>
<div style="position: relative">
<input type="text" id="query">
<div id="autocompleter"></div>
</div>
<script>
var autocompleter = sdk.component('autocompleter', '#autocompleter', {
transformData: function (result) {
result.highlighted_repr = result.highlighted_repr.toUpperCase();
return result;
},
});
var input = document.querySelector('#query');
autocompleter.setInputElement(input);
input.addEventListener('keypress', function (event) {
// Track clicks and open URLs.
if (autocompleter.suggestion && event.keyCode === 13) {
autocompleter.trackClick(autocompleter.suggestion);
}
});
// This step is necessary to allow the typeahead autocomplete to fetch the data.
var results = sdk.component('results', document.createElement('div'));
results.linkTo(autocompleter);
</script>