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

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

<div data-page="autocomplete" class="page" ng-controller="Autocomplete">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link"><i class="icon icon-back icon-only"></i></a></div>
      <div class="center sliding">Autocomplete</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block-title">Dropdown Autocomplete</div>
    <div class="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.</p>
    </div>
    <div class="content-block-title">Simple Dropdown Autocomplete</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title floating-label">Favorite Fruit</div>
            <div class="item-input">
              <input type="text" id="autocomplete-dropdown"/>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Dropdown With All Values</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title floating-label">Favorite Fruit</div>
            <div class="item-input">
              <input type="text" id="autocomplete-dropdown-all"/>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Dropdown With Placeholder</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title floating-label">Favorite Fruit</div>
            <div class="item-input">
              <input type="text" id="autocomplete-dropdown-placeholder"/>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Dropdown With Ajax-Data</div>
    <div class="list-block">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title floating-label">Programming Language</div>
            <div class="item-input">
              <input type="text" id="autocomplete-dropdown-ajax"/>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block-title">Standalone Autocomplete</div>
    <div class="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.</p>
    </div>
    <div class="content-block-title">Simple Standalone Autocomplete</div>
    <div class="list-block">
      <ul>
        <li><a href="#" id="autocomplete-standalone" class="item-link item-content autocomplete-opener">
            <input type="hidden"/>
            <div class="item-inner">
              <div class="item-title">Favorite Fruite</div>
              <div class="item-after"></div>
            </div></a></li>
      </ul>
    </div>
    <div class="content-block-title">Popup Standalone Autocomplete</div>
    <div class="list-block">
      <ul>
        <li><a href="#" id="autocomplete-standalone-popup" class="item-link item-content autocomplete-opener">
            <input type="hidden"/>
            <div class="item-inner">
              <div class="item-title">Favorite Fruite</div>
              <div class="item-after"></div>
            </div></a></li>
      </ul>
    </div>
    <div class="content-block-title">Multiple Values Standalone Autocomplete</div>
    <div class="list-block">
      <ul>
        <li><a href="#" id="autocomplete-standalone-multiple" class="item-link item-content autocomplete-opener">
            <input type="hidden"/>
            <div class="item-inner">
              <div class="item-title">Favorite Fruite</div>
              <div class="item-after"></div>
            </div></a></li>
      </ul>
    </div>
    <div class="content-block-title">Standalone With Ajax-Data</div>
    <div class="list-block">
      <ul>
        <li><a href="#" id="autocomplete-standalone-ajax" class="item-link item-content autocomplete-opener">
            <input type="hidden"/>
            <div class="item-inner">
              <div class="item-title">Language</div>
              <div class="item-after"></div>
            </div></a></li>
      </ul>
    </div>
  </div>
</div>