extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'autocomplete'
  - var parent = 'experimentals'
  - var title = 'Autocomplete - Experimentals - Spectre.css CSS Framework'
  - var 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.'

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