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.

Important

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

HTML structure

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

CSS editable properties