extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'autocomplete'
  - var parent = 'experimentals'
  - var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

block docs-content
  +docs-heading('autocomplete', 'Autocomplete')
    include ../_layout/_ad-g.pug
    
    p
      | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

    .docs-demo.columns
      .column.col-9.col-xs-12
        .form-group
          .form-autocomplete
            .form-autocomplete-input.form-input
              span.chip
                | Bruce Banner
              .chip
                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
                | Thor Odinson
              .chip
                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
                | Steve Rogers
              .chip
                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
                | Tony Stark
              span.chip.active
                | Natasha Romanoff
              input.form-input(type="text" placeholder="")
      .column.col-9.col-xs-12
        .form-group
          .form-autocomplete
            .form-autocomplete-input.form-input.is-focused
              span.chip
                | Bruce Banner
                a.btn.btn-clear(href="#" aria-label="Close" role="button")
              span.chip
                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Thor Odinson")
                | Thor Odinson
                a.btn.btn-clear(href="#" aria-label="Close" role="button")
              .has-icon-left
                input.form-input(type="text" placeholder="" value="S")
                i.form-icon.loading
            ul.menu
              li.menu-item
                a(href="#autocomplete")
                  .tile.tile-centered
                    .tile-icon
                      img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Steve Rogers")
                    .tile-content
                      mark S
                      | teve Roger
                      mark s
              li.menu-item
                a(href="#autocomplete")
                  .tile.tile-centered
                    .tile-icon
                      figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
                    .tile-content
                      | Tony 
                      mark S
                      | tark

    p
      | Add a container element with the #[code form-autocomplete] class.
      | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
      | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
    p
      | 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.

    .docs-demo.columns
      .column.col-9.col-xs-12
        .form-group
          .form-autocomplete.autocomplete-oneline
            .form-autocomplete-input.form-input
              span.chip
                | Bruce Banner
              .chip
                img.avatar.avatar-sm(src="../img/avatar-1.png" alt="Avatar")
                | Thor Odinson
              .chip
                img.avatar.avatar-sm(src="../img/avatar-4.png" alt="Avatar")
                | Steve Rogers
              .chip
                figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
                | Tony Stark
              span.chip.active
                | Natasha Romanoff
              input.form-input(type="text" placeholder="")

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <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>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug