Autocomplete Demos

pandoraui · Dec 6, 2015 · ef5217a · ef5217a
1 parent 51f8ee9
commit ef5217a
Show file tree

Hide file tree

Showing 12 changed files with 6,555 additions and 2 deletions.
diff --git a/kitchen-sink-ios/autocomplete.html b/kitchen-sink-ios/autocomplete.html
@@ -0,0 +1,121 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></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="pages navbar-through">
+  <div data-page="autocomplete" class="page">
+    <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-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Dropdown With Input Expand</div>
+      <div class="list-block">
+        <ul>
+          <li class="item-content">
+            <div class="item-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown-expand"/>
+            </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-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown-all"/>
+            </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-title label">Fruit</div>
+            <div class="item-input">
+              <input type="text" placeholder="Fruit" id="autocomplete-dropdown-placeholder"/>
+            </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-title label">Language</div>
+            <div class="item-input">
+              <input type="text" placeholder="Language" id="autocomplete-dropdown-ajax"/>
+            </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>
+</div>
diff --git a/kitchen-sink-ios/index.html b/kitchen-sink-ios/index.html
@@ -161,6 +161,14 @@
                           <div class="item-title">Accordion</div>
                         </div>
                       </div></a></li>
+                  <li><a href="autocomplete.html" class="item-link"> 
+                      <div class="item-content">
+                        <div class="item-media"><i class="icon icon-f7"></i></div>
+                        <div class="item-inner"> 
+                          <div class="item-title">Autocomplete</div>
+                          <div class="item-after"><span class="badge bg-green">NEW</span></div>
+                        </div>
+                      </div></a></li>
                   <li><a href="calendar.html" class="item-link">
                       <div class="item-content">
                         <div class="item-media"><i class="icon icon-f7"></i></div>

diff --git a/kitchen-sink-ios/jade/autocomplete.jade b/kitchen-sink-ios/jade/autocomplete.jade
@@ -0,0 +1,90 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back
+        span Back
+    .center.sliding Autocomplete
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="autocomplete")
+    .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-title.label Fruit
+            .item-input
+              input(type="text", placeholder="Fruit")#autocomplete-dropdown
+      .content-block-title Dropdown With Input Expand
+      .list-block
+        ul
+          li.item-content
+            .item-title.label Fruit
+            .item-input
+              input(type="text", placeholder="Fruit")#autocomplete-dropdown-expand
+      .content-block-title Dropdown With All Values
+      .list-block
+        ul
+          li.item-content
+            .item-title.label Fruit
+            .item-input
+              input(type="text", placeholder="Fruit")#autocomplete-dropdown-all
+      .content-block-title Dropdown With Placeholder
+      .list-block
+        ul
+          li.item-content
+            .item-title.label Fruit
+            .item-input
+              input(type="text", placeholder="Fruit")#autocomplete-dropdown-placeholder
+      .content-block-title Dropdown With Ajax-Data
+      .list-block
+        ul
+          li.item-content
+            .item-title.label Language
+            .item-input
+              input(type="text", placeholder="Language")#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
diff --git a/kitchen-sink-ios/jade/index.jade b/kitchen-sink-ios/jade/index.jade
@@ -150,6 +150,15 @@ html
                           i.icon.icon-f7
                         .item-inner 
                           .item-title Accordion
+                  li
+                    a(href="autocomplete.html").item-link 
+                      .item-content
+                        .item-media
+                          i.icon.icon-f7
+                        .item-inner 
+                          .item-title Autocomplete
+                          .item-after
+                            span.badge.bg-green NEW
                   li
                     a(href="calendar.html").item-link
                       .item-content