Autocomplete - Experimentals - Spectre.css CSS Framework
Author: Yan Zhu
Description: Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Autocomplete#

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

Bruce Banner
Thor Odinson
Steve Rogers
Tony Stark
Natasha Romanoff
Bruce Banner Thor Odinson

- Steve Roger s
- Tony Stark

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
Thor Odinson
Steve 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>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.