Autocomplete#

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

Add a container element with the form-autocomplete class. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the is-focused class to form-autocomplete-input to make it appear as focus state.

Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.

<div class="form-autocomplete">
  <!-- autocomplete input container -->
  <div class="form-autocomplete-input form-input">

    <!-- autocomplete chips -->
    <div class="chip">
      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
      Thor Odinson
      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
    </div>

    <!-- autocomplete real input box -->
    <input class="form-input" type="text" placeholder="typing here">
  </div>

  <!-- autocomplete suggestion list -->
  <ul class="menu">
    <!-- menu list items -->
    <li class="menu-item">
      <a href="#">
        <div class="tile tile-centered">
          <div class="tile-icon">
            ...
          </div>
          <div class="tile-content">
            ...
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>