Typeahead Autocomplete

Overview

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.

Usage

This is how you create this component:

sdk.component('autocompleter', 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
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.

Properties

Property Description
suggestion Get the current active content
cursor Get the current suggestion position

Methods

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

Templates

Item Template

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: "..."
}

Tracking

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

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.

Labels

This component uses the following labels:

Name Default Description
AUTOCOMPLETER_VIEW_ALL_BUTTON View all contents The text for the view all button

Examples

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>
Item Template Example
<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>
Using transformData
<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>