Typeahead Autocomplete

Typeahead Autocompleter

The typeahead autocomplete (formerly known as "autocompleter") component is nested in a .inbenta-search-autocompleter container.

It displays a list of links (.inbenta-search-autocompleter__link) for every result found. Each link contains a title for this result (.inbenta-search-autocompleter__link__setting-title).

It is possible to go directly to a page containing all the results. This link has two elements:

  • a parent class .inbenta-search-autocompleter__view-all.
  • a link class .inbenta-search-autocompleter__link.


If you do not use the template, remember that you must place the typeahead autocomplete and your search box in the same div element. Place this div above the input with the position: relative; property so that the typeahead autocomplete appears below the search engine.

Component image

Typeahead Autocompleter

HTML structure

<ul class="inbenta-search-autocompleter">
      <a class="inbenta-search-autocompleter__link">
        <div class="inbenta-search-autocompleter__link__setting-title">
            Autocompleter example title
    <li class="inbenta-search-autocompleter__view-all">
      <a class="inbenta-search-autocompleter__view-all__link">View all</a>

CSS editable properties

Class Css
.inbenta-search-autocompleter position, margin, width, z-index, padding, background, list-style, box-shadow, border
.inbenta-search-autocompleter__link color, text-decoration
.inbenta-search-autocompleter__link__setting-title padding, color, pseudo-class(hover): background
.inbenta-search-autocompleter__view-all width, padding
.inbenta-search-autocompleter__view-all__link color, pseudo-class(hover): color