droplist in progress

wp-content/themes/biuro/css/07-components/__components.css

@@ -6,6 +6,7 @@ rich design UI styling. Class names here are more specific. This layer usually h
 c-: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.
 ========================================================================== */
 
+@import '_component--awesomplete.css';
 @import '_component--breadcrumbs.css';
 @import '_component--cookies-warning.css';
 @import '_component--copy.css';

wp-content/themes/biuro/css/07-components/_component--awesomplete.css

+/* ------------- Component: awesomplete ------------- */
+
+/* critical:start */
+
+/* critical:end */
+
+.awesomplete [hidden] {
+    display: none;
+}
+
+.awesomplete .visually-hidden {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+}
+
+.awesomplete {
+    display: inline-block;
+    position: relative;
+}
+
+.awesomplete > input {
+    display: block;
+}
+
+.awesomplete > ul {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    min-width: 100%;
+    box-sizing: border-box;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background: #fff;
+}
+
+.awesomplete > ul:empty {
+    display: none;
+}

wp-content/themes/biuro/js/main.js

-// const cb = () => {
-//     const l = document.createElement('link');
-//     const h = document.getElementsByTagName('head')[0];
-
-//     l.rel = 'stylesheet';
-//     l.href = '/wp-content/themes/biuro/css/main.min.css';
-
-//     h.parentNode.insertBefore(l, h);
-// };
-// const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-
-// if (raf) {
-//     raf(cb);
-// } else {
-//     if (window.addEventListener) {
-//         window.addEventListener('load', cb);
-//     } else {
-//         window.attachEvent('onload', cb);
-//     }
-// }
+import Awesomplete from './vendor/awesomplete';
 
 (global => {
     const container = document.getElementById('cookie-warning');
@@ -133,7 +114,7 @@ function initDivisionsMap (node, data) {
     } else {
         Object.keys(data).forEach((key) => {
             const division = data[key];
-            if (key.substr(0, 4) === 'city' ) {
+            if (key.substr(0, 4) === 'city') {
                 divisions = divisions.concat(division);
             }
         });
@@ -141,3 +122,172 @@ function initDivisionsMap (node, data) {
 
     setMarkers(map, divisions.filter((d) => { return d.lat && d.lng; }));
 }
+
+
+
+
+
+
+
+
+
+
+
+// console.error('Awesomplete');
+// console.dir(Awesomplete);
+
+const city = document.getElementById('search-city');
+const search = document.getElementById('search-query');
+
+const cityBox = new Awesomplete(city, {
+    minChars: 0,
+    sort: false,
+    // data: (item, input) => {
+    //     console.error('----------');
+    //     console.dir(item);
+    //     console.dir(input);
+    //     return { label: item.value, value: item.name };
+    // },
+    // replace: function(text) {
+    //     console.error('text');
+    //     console.dir(text);
+    //     // var hidden = document.querySelector('[name="' + this.input.dataset.name + '"]');
+
+    //     // this.input.value = text.label;
+
+    //     // if (!hidden) {
+    //     //     return;
+    //     // }
+
+    //     // hidden.value = text.value;
+
+    //     // if (hidden.classList.contains('js-trigger-datalist')) {
+    //     //     hidden.dispatchEvent(new Event('change', {
+    //     //         'bubbles': true,
+    //     //         'cancelable': true
+    //     //     }));
+    //     // }
+
+    //     // hidden.dispatchEvent(event);
+
+
+    // }
+// });
+});
+
+city.addEventListener('focus', () => {
+    cityBox.evaluate();
+});
+
+const searchBox = new Awesomplete(search, {
+    minChars: 0,
+    sort: false
+});
+
+search.addEventListener('focus', () => {
+    searchBox.evaluate();
+});
+
+
+
+
+
+
+
+    // function initDatalist() {
+
+    //     var nodes = document.querySelectorAll('.js-datalist, .js-datalist-ajax'),
+    //         node,
+    //         getHidden = function(node) {
+    //             return document.querySelector('[name="' + node.dataset.name + '"]');
+    //         },
+    //         event = new Event('input', {
+    //             'bubbles': true,
+    //             'cancelable': true
+    //         });
+
+    //     for (var i = 0; i < nodes.length; i++) {
+    //         node = nodes[i];
+
+    //         if (node.comboplete) {
+    //             return;
+    //         }
+
+    //         node.comboplete = new Awesomplete(node, {
+    //             minChars: 0,
+    //             maxItems: 50,
+    //             replace: function(text) {
+
+    //                 var hidden = getHidden(this.input);
+
+    //                 this.input.value = text.label;
+
+    //                 if (!hidden) {
+    //                     return;
+    //                 }
+
+    //                 hidden.value = text.value;
+
+    //                 if (hidden.classList.contains('js-trigger-datalist')) {
+    //                     hidden.dispatchEvent(new Event('change', {
+    //                         'bubbles': true,
+    //                         'cancelable': true
+    //                     }));
+    //                 }
+
+    //                 hidden.dispatchEvent(event);
+
+
+    //             }
+    //         });
+
+    //         node.addEventListener('click', function() {
+    //             if (this.comboplete.ul.childNodes.length === 0 || !node.value) {
+    //                 this.comboplete.minChars = 0;
+    //                 this.comboplete.evaluate();
+    //             }
+    //             else if (this.comboplete.ul.hasAttribute('hidden')) {
+    //                 this.comboplete.open();
+    //             }
+    //             else {
+    //                 this.comboplete.close();
+    //             }
+    //         });
+
+    //         node.addEventListener('keyup', function(e) {
+    //             var code = e.keyCode || 0;
+
+    //             if (code === 13) {
+    //                 if (this.comboplete.ul.childNodes.length === 1) {
+    //                     this.comboplete.select(this.comboplete.ul.childNodes[0]);
+    //                 }
+    //             }
+    //         });
+
+    //         node.addEventListener('input', function() {
+    //             var value = this.value,
+    //                 exists = false,
+    //                 hidden;
+
+    //             this.comboplete.ul.childNodes.forEach(function(n) {
+    //                 if (n.innerText === value) {
+    //                     exists = true;
+    //                 }
+    //             });
+
+    //             if (exists) {
+    //                 return;
+    //             }
+
+    //             hidden = getHidden(this);
+
+    //             if (!hidden) {
+    //                 return;
+    //             }
+
+    //             hidden.value = '';
+
+    //             hidden.dispatchEvent(event);
+    //         })
+    //     }
+    // }

wp-content/themes/biuro/searchform.php

@@ -69,7 +69,7 @@
     </datalist>
     <input list="search-cities" id="search-city" name="city"  value="<?php echo cityID; ?>" placeholder="Vietovė" />
 
-    <datalist id="search-types">
+    <datalist id="search-queries">
 <?php
             $options = array();
 
@@ -161,14 +161,7 @@
 
 ?>
     </datalist>
-
-<?php
-
-            // debug( $options );
-
- ?>
-
-    <input list="search-types" id="search" name="s" value="<?php echo searchQuery; ?>" placeholder="Raktažodis" />
+    <input list="search-queries" id="search-query" name="s" value="<?php echo searchQuery; ?>" placeholder="Raktažodis" />
 
 
     <input type="submit" value="Ieškoti" class="filter-button" />