Autocomplete Component

gulpfile.js

@@ -1,5 +1,5 @@
 (function(){
-    'use strict';    
+    'use strict';
     var gulp = require('gulp'),
         connect = require('gulp-connect'),
         open = require('gulp-open'),
@@ -98,6 +98,7 @@
                 'src/js/push-state.js',
                 'src/js/swiper-init.js',
                 'src/js/photo-browser.js',
+                'src/js/autocomplete.js',
                 'src/js/picker.js',
                 'src/js/calendar.js',
                 'src/js/notifications.js',

modules.json

@@ -215,6 +215,14 @@
         },
         "dependencies" : ["swiper"]
     },
+    "autocomplete": {
+        "js" : ["src/js/autocomplete.js"],
+        "less": {
+            "ios": ["src/less/ios/autocomplete.less"],
+            "material": ["src/less/material/autocomplete.less"]
+        },
+        "dependencies" : ["searchbar"]
+    },
     "notifications": {
         "js" : ["src/js/notifications.js"],
         "less": {

src/less/ios/autocomplete.less

@@ -0,0 +1,78 @@
+/* === Autocomplete === */
+.autocomplete-page {
+    .autocomplete-found {
+        display: block;
+    }
+    .autocomplete-not-found {
+        display: none;
+    }
+    .autocomplete-values {
+        display: block;
+    }
+    .list-block ul:empty {
+        display: none;
+    }
+}
+.autocomplete-preloader:not(.autocomplete-preloader-visible) {
+    -webkit-animation: none;
+    animation: none;
+    visibility: hidden;
+}
+
+.autocomplete-dropdown {
+    background: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 500;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
+    width: 100%;
+    left: 0;
+    .autocomplete-dropdown-inner {
+        position: relative;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        height: 100%;
+        z-index: 1;
+    }
+    .autocomplete-preloader {
+        display: none;
+        position: absolute;
+        right: 15px;
+        bottom: 100%;
+        margin-bottom: 12px;
+    }
+    .autocomplete-preloader-visible {
+        display: block;
+    }
+    .autocomplete-dropdown-placeholder {
+        color: #a9a9a9;
+    }
+    .list-block {
+        margin: 0;
+        ul {
+            .hairline-remove(top);
+            .hairline-remove(bottom);
+            background: none !important;
+        }
+        b {
+            font-weight: 500;
+            html.ios-gt-8 & {
+                font-weight: 600;
+            }
+        }
+    }
+}
+.list-block {
+    .item-content-dropdown-expand {
+        .item-title.label {
+            width: 0;
+            .flex-shrink(10);
+            + .item-input {
+                margin-left: 0;
+            }
+        }
+        .item-input {
+            width: 100%;
+        }
+    }
+}

src/less/ios/framework7.ios.colors.less

@@ -277,6 +277,12 @@ Framework7 Layouts Themes
             background: none;
         }
     }
+    .autocomplete-dropdown  {
+        background: @blockBg;
+        .list-block b {
+            color: #fff;
+        }
+    }
     .card {
         background: @blockBg;
     }

src/less/ios/framework7.ios.less

@@ -25,6 +25,7 @@
 @import url('preloader.less');
 @import url('progressbar.less');
 @import url('pull-to-refresh.less');
+@import url('autocomplete.less');
 @import url('swiper.less');
 @import url('photo-browser.less');
 @import url('picker.less');

src/less/ios/lists.less

@@ -115,11 +115,12 @@
         .flexbox();
         max-height: 28px;
     }
-    .smart-select .item-after {
+    .smart-select .item-after, .autocomplete-opener .item-after {
         max-width: 70%;
         overflow: hidden;
-        text-overflow:ellipsis;
+        text-overflow: ellipsis;
         position: relative;
+        display: block;
     }
     .item-link {
         .transition(300ms);

src/less/material/autocomplete.less

@@ -0,0 +1,65 @@
+/* === Autocomplete === */
+.autocomplete-page {
+    .autocomplete-found {
+        display: block;
+    }
+    .autocomplete-not-found {
+        display: none;
+    }
+    .autocomplete-values {
+        display: block;
+    }
+    .list-block ul:empty {
+        display: none;
+    }
+}
+.autocomplete-preloader:not(.autocomplete-preloader-visible) {
+    -webkit-animation: none;
+    animation: none;
+    visibility: hidden;
+}
+
+.autocomplete-dropdown {
+    background: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    z-index: 500;
+    // box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
+    .depth(1);
+    width: 100%;
+    left: 0;
+    // margin-top: -2px;
+    .autocomplete-dropdown-inner {
+        position: relative;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        height: 100%;
+        z-index: 1;
+    }
+    .autocomplete-preloader {
+        display: none;
+        position: absolute;
+        right: 15px;
+        bottom: 100%;
+        margin-bottom: 12px;
+    }
+    .autocomplete-preloader-visible {
+        display: block;
+    }
+    .autocomplete-dropdown-placeholder {
+        color: #a9a9a9;
+    }
+    .list-block {
+        margin: 0;
+        color: rgba(0,0,0,0.54);
+        ul {
+            .hairline-remove(top);
+            .hairline-remove(bottom);
+            background: none !important;
+        }
+        b {
+            font-weight: normal;
+            color: #212121;
+        }
+    }
+}

src/less/material/framework7.material.colors.less

@@ -89,6 +89,15 @@ Framework7 Layouts Themes
     .contacts-block .list-group-title {
         background: none;
     }
+    .autocomplete-dropdown  {
+        background: @blockBg;
+        .list-block {
+            color: rgba(255,255,255,0.54);
+        }
+        .list-block b {
+            color: rgba(255,255,255,0.87);
+        }
+    }
     // Forms
     .item-link, label.label-checkbox, label.label-radio {
         html:not(.watch-active-state) &:active, &.active-state {

src/less/material/framework7.material.less

@@ -27,6 +27,7 @@
 @import url('preloader.less');
 @import url('progressbar.less');
 @import url('pull-to-refresh.less');
+@import url('autocomplete.less');
 @import url('swiper.less');
 @import url('photo-browser.less');
 @import url('picker.less');

src/less/material/lists.less

@@ -104,7 +104,7 @@
         text-overflow: ellipsis;
         max-width: 100%;
     }
-    
+
     .item-after {
         white-space: nowrap;
         color: #757575;
@@ -114,11 +114,12 @@
         max-height: 28px;
         font-size: 14px;
     }
-    .smart-select .item-after {
+    .smart-select .item-after, .autocomplete-opener .item-after {
         max-width: 70%;
         overflow: hidden;
-        text-overflow:ellipsis;
+        text-overflow: ellipsis;
         position: relative;
+        display: block;
     }
     .item-link {
         .transition(300ms);