framework7.angular/kitchen-sink-material/jade/autocomplete.jade

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

.page(data-page="autocomplete")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link
          i.icon.icon-back.icon-only
      .center.sliding Autocomplete
      .right
        a(href="#").open-panel.link.icon-only
          i.icon.icon-bars
  .page-content
    .content-block-title Dropdown Autocomplete
    .content-block
      p Dropdown autocomplete is good to use as a quick and simple solution to provide more options in addition to free-type value.
    .content-block-title Simple Dropdown Autocomplete
    .list-block
      ul
        li.item-content
          .item-inner
            .item-title.floating-label Favorite Fruit
            .item-input
              input(type="text")#autocomplete-dropdown
    .content-block-title Dropdown With All Values
    .list-block
      ul
        li.item-content
          .item-inner
            .item-title.floating-label Favorite Fruit
            .item-input
              input(type="text")#autocomplete-dropdown-all
    .content-block-title Dropdown With Placeholder
    .list-block
      ul
        li.item-content
          .item-inner
            .item-title.floating-label Favorite Fruit
            .item-input
              input(type="text")#autocomplete-dropdown-placeholder
    .content-block-title Dropdown With Ajax-Data
    .list-block
      ul
        li.item-content
          .item-inner
            .item-title.floating-label Programming Language
            .item-input
              input(type="text")#autocomplete-dropdown-ajax
    .content-block-title Standalone Autocomplete
    .content-block
      p Standalone autocomplete provides better mobile UX by opening it in a new page or popup. Good to use when you need to get strict values without allowing free-type values.
    .content-block-title Simple Standalone Autocomplete
    .list-block
      ul
        li
          a(href="#").item-link.item-content.autocomplete-opener#autocomplete-standalone
            input(type="hidden")
            .item-inner
              .item-title Favorite Fruite
              .item-after
    .content-block-title Popup Standalone Autocomplete
    .list-block
      ul
        li
          a(href="#").item-link.item-content.autocomplete-opener#autocomplete-standalone-popup
            input(type="hidden")
            .item-inner
              .item-title Favorite Fruite
              .item-after
    .content-block-title Multiple Values Standalone Autocomplete
    .list-block
      ul
        li
          a(href="#").item-link.item-content.autocomplete-opener#autocomplete-standalone-multiple
            input(type="hidden")
            .item-inner
              .item-title Favorite Fruite
              .item-after
    .content-block-title Standalone With Ajax-Data
    .list-block
      ul
        li
          a(href="#").item-link.item-content.autocomplete-opener#autocomplete-standalone-ajax
            input(type="hidden")
            .item-inner
              .item-title Language
              .item-after