PayPalGitHub

Autocomplete

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

Bruce Banner
AvatarThor Odinson
AvatarSteve Rogers
Tony Stark
Natasha Romanoff
Bruce BannerThor OdinsonThor Odinson

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.

Bruce Banner
AvatarThor Odinson
AvatarSteve Rogers
Tony Stark
Natasha Romanoff 
<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>