build(dist): recompiled dist directory, fixed css of example file

dist/example.html

@@ -4,7 +4,6 @@
 	<title>🦄 simplecomplete 👌</title>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<script src="./simplecomplete.js"></script>
 	<link rel="stylesheet" href="./min/simplecomplete.min.css" />
 	<style type="text/css">
 		@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
@@ -20,16 +19,18 @@
 			padding:  0;
 			margin:  0;
 			box-sizing:  border-box;
+			background:  #F6F6F6;
 		}
 
+		@media screen and (min-width:  992px) {
 			body {
 				display:  flex;
 				flex-flow:  column nowrap;
 				justify-content:  center;
 				align-items:  center;
-			background:  #F6F6F6;
 				overflow-y:  auto;
 			}
+		}
 
 		h1 {
 
@@ -39,6 +40,7 @@
 			width:  80vw;
 			background:  white;
 			padding:  2rem;
+			margin:  1em auto;
 			border-radius:  1em;
 			box-shadow:  0 .125em .25em rgba(0,0,0,.1);
 		}
@@ -50,8 +52,8 @@
 		<h2>Just a search... but cool.</h2>
 		<input type="text" data-sc="https://gorest.co.in/public/v1/users" data-param="name" />
 
-		<h2>A fake User Search just add the endpoint and the param name</h2>
+		<h2>a simple select without an external source</h2>
-		<select data-sc="https://gorest.co.in/public/v1/users" data-param="name">
+		<select data-sc>
 			<option value="ajin" selected>Ajin</option>
 			<option value="slump">Dr. Slump</option>
 			<option value="chobits">Chobits</option>
@@ -64,12 +66,16 @@
 			<option value="naruto">Naruto</option>
 		</select>
 
+		<h2>A fake User Search just add the endpoint and the param name</h2>
+		<select data-sc="https://gorest.co.in/public/v1/users" data-param="name"></select>
+
 		<h2>Hello World...</h2>
-		<select multiple="true" id="multiple-select" data-sc="https://gorest.co.in/public/v1/users" data-param="name">
+		<select multiple="true" id="multiple-select" data-sc="https://api.github.com/search/repositories?per_page=5" data-param="q">
 			<option>Option A</option>
 			<option selected>Option B</option>
 			<option selected>Option C</option>
 		</select>
 	</div>
+	<script src="./min/simplecomplete.min.js"></script>
 </body>
 </html>

dist/simplecomplete.css

@@ -50,11 +50,10 @@
   display: flex;
   flex-flow: row nowrap;
 }
-.simplecomplete__input-field, .simplecomplete__value {
+.simplecomplete__input-field {
   flex: 1;
   background: white;
   padding: 0.5em 0.75em;
-  overflow-x: auto;
   white-space: nowrap;
   border: solid 0.0625em transparent;
   border-radius: 0.4em;
@@ -62,7 +61,7 @@
   margin: 0.125em;
 }
 @media screen and (max-width: 992px) {
-  .simplecomplete__input-field, .simplecomplete__value {
+  .simplecomplete__input-field {
     border-radius: 0;
   }
 }
@@ -99,6 +98,18 @@
     color: #DDDDDD;
   }
 }
+.simplecomplete__value {
+  border: solid 0.0625em transparent;
+  border-radius: 0.4em;
+  background: white;
+  flex: 1;
+  flex-flow: row wrap;
+  white-space: normal;
+  margin: 0.125em;
+  padding: 0;
+  padding-bottom: 0.25em;
+  outline: none;
+}
 .simplecomplete__value:not(.hide) ~ .simplecomplete__input {
   display: none;
 }
@@ -114,12 +125,7 @@
   border: solid 0.0625em transparent;
   background: #DDDDDD;
   color: #111111;
-}
+  margin: 0.25em 0.25em 0;
-.simplecomplete__value > .selected-option:first-child, .simplecomplete__value > .empty-item:first-child {
-  margin-left: -0.25em;
-}
-.simplecomplete__value > .selected-option:last-child, .simplecomplete__value > .empty-item:last-child {
-  margin-right: -0.25em;
 }
 .simplecomplete__value > .empty-item {
   background: #FFFFFF;
@@ -129,6 +135,17 @@
 .simplecomplete__value.is-empty {
   color: #BBBBBB;
 }
+@media screen and (max-width: 992px) {
+  .simplecomplete__value {
+    border-radius: 0;
+  }
+}
+.simplecomplete:not(.is-select) .simplecomplete__value.is-empty {
+  padding: 0.75em 0.5em;
+}
+.simplecomplete.is-multiple .simplecomplete__value, .simplecomplete.is-blankable .simplecomplete__value {
+  position: relative;
+}
 .simplecomplete.is-multiple .simplecomplete__value > .selected-option:after, .simplecomplete.is-blankable .simplecomplete__value > .selected-option:after {
   content: "×";
   display: inline;
@@ -139,6 +156,7 @@
   display: block;
 }
 .simplecomplete__results {
+  display: none;
   position: absolute;
   top: 100%;
   left: 0;
@@ -241,14 +259,30 @@
 .simplecomplete .hide {
   display: none;
 }
+.simplecomplete.is-select:not(.active) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+.simplecomplete.is-select:not(.active):after {
+  content: "";
+  display: inline-block;
+  border: solid 0.25em #111111;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  transform: translateY(-40%) rotate(-45deg);
+  width: 0;
+  height: 0;
+  margin: 0 1em;
+}
 .simplecomplete.is-blankable:not(.active) .simplecomplete__value > .selected-option:after {
   display: none;
 }
 .simplecomplete.active:not(.is-select) .simplecomplete__results {
   display: block;
 }
-.simplecomplete.active.is-select .simplecomplete__input-field, .simplecomplete.active.is-select .simplecomplete__value, .simplecomplete:not(.is-select) .simplecomplete__input-field, .simplecomplete:not(.is-select) .simplecomplete__value {
+.simplecomplete.active.is-select .simplecomplete__input-field, .simplecomplete:not(.is-select) .simplecomplete__input-field {
-  padding: 1.05em;
+  padding: 0.85em;
 }
 .simplecomplete.inline {
   display: inline-block;
@@ -290,7 +324,7 @@
   animation-duration: 3s;
   animation-timing-function: linear;
 }
-.simplecomplete.is-busy .simplecomplete__input-field, .simplecomplete.is-busy .simplecomplete__value {
+.simplecomplete.is-busy .simplecomplete__input-field {
   border-color: #FF64B1;
 }
 .simplecomplete.is-busy .simplecomplete__results-list {
@@ -317,6 +351,6 @@
   margin-top: 0.6em;
   margin-bottom: 0.4em;
 }
-.simplecomplete:not(.has-results) .simplecomplete__results {
+.simplecomplete.active .simplecomplete__results {
-  display: none;
+  display: block;
 }

dist/simplecomplete.js

@@ -97,7 +97,7 @@ module.exports = function (S, index, unicode) {
 
 /***/ }),
 
-/***/ 787:
+/***/ 5787:
 /***/ (function(module) {
 
 module.exports = function (it, Constructor, name) {
@@ -527,7 +527,7 @@ module.exports = function (target, source) {
 
 /***/ }),
 
-/***/ 964:
+/***/ 4964:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var wellKnownSymbol = __webpack_require__(5112);
@@ -1752,7 +1752,7 @@ module.exports = isCallable(WeakMap) && /native code/.test(inspectSource(WeakMap
 
 /***/ }),
 
-/***/ 929:
+/***/ 3929:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var isRegExp = __webpack_require__(7850);
@@ -2178,7 +2178,7 @@ module.exports = global;
 
 /***/ }),
 
-/***/ 248:
+/***/ 2248:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var redefine = __webpack_require__(1320);
@@ -2991,7 +2991,7 @@ $({ target: 'Array', stat: true, forced: INCORRECT_ITERATION }, {
 
 /***/ }),
 
-/***/ 699:
+/***/ 6699:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
@@ -3101,7 +3101,7 @@ $({ target: 'Array', proto: true, forced: ES3_STRINGS || !STRICT_METHOD }, {
 
 /***/ }),
 
-/***/ 249:
+/***/ 1249:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
@@ -3549,16 +3549,16 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 
 /***/ }),
 
-/***/ 23:
+/***/ 2023:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 
 var $ = __webpack_require__(2109);
-var notARegExp = __webpack_require__(929);
+var notARegExp = __webpack_require__(3929);
 var requireObjectCoercible = __webpack_require__(4488);
 var toString = __webpack_require__(1340);
-var correctIsRegExpLogic = __webpack_require__(964);
+var correctIsRegExpLogic = __webpack_require__(4964);
 
 // `String.prototype.includes` method
 // https://tc39.es/ecma262/#sec-string.prototype.includes
@@ -4359,7 +4359,7 @@ handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
 /***/ }),
 
-/***/ 637:
+/***/ 1637:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
@@ -4370,11 +4370,11 @@ var $ = __webpack_require__(2109);
 var getBuiltIn = __webpack_require__(5005);
 var USE_NATIVE_URL = __webpack_require__(590);
 var redefine = __webpack_require__(1320);
-var redefineAll = __webpack_require__(248);
+var redefineAll = __webpack_require__(2248);
 var setToStringTag = __webpack_require__(8003);
 var createIteratorConstructor = __webpack_require__(4994);
 var InternalStateModule = __webpack_require__(9909);
-var anInstance = __webpack_require__(787);
+var anInstance = __webpack_require__(5787);
 var isCallable = __webpack_require__(614);
 var hasOwn = __webpack_require__(2597);
 var bind = __webpack_require__(9974);
@@ -4831,17 +4831,19 @@ var es_object_to_string = __webpack_require__(1539);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.iterator.js
 var web_dom_collections_iterator = __webpack_require__(3948);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.url-search-params.js
-var web_url_search_params = __webpack_require__(637);
+var web_url_search_params = __webpack_require__(1637);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.keys.js
 var es_object_keys = __webpack_require__(7941);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.to-string.js
 var es_regexp_to_string = __webpack_require__(9714);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.includes.js
-var es_array_includes = __webpack_require__(699);
+var es_array_includes = __webpack_require__(6699);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.includes.js
-var es_string_includes = __webpack_require__(23);
+var es_string_includes = __webpack_require__(2023);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
-var es_array_map = __webpack_require__(249);
+var es_array_map = __webpack_require__(1249);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
+var es_array_filter = __webpack_require__(7327);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.function.name.js
 var es_function_name = __webpack_require__(8309);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.constructor.js
@@ -4856,8 +4858,6 @@ var es_array_join = __webpack_require__(9600);
 var es_string_split = __webpack_require__(3123);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.js
 var es_symbol = __webpack_require__(2526);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
-var es_array_filter = __webpack_require__(7327);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.get-own-property-descriptor.js
 var es_object_get_own_property_descriptor = __webpack_require__(5003);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.get-own-property-descriptors.js
@@ -5172,8 +5172,9 @@ var SimpleComplete = /*#__PURE__*/function () {
   }, {
     key: "onInput",
     value: function onInput(e) {
-      if (this.launchedRequest) {
+      if (this.launchedRequest !== null) {
         window.clearTimeout(this.launchedRequest);
+        this.launchedRequest = null;
       }
 
       switch (e.keyCode) {
@@ -5186,24 +5187,27 @@ var SimpleComplete = /*#__PURE__*/function () {
       }
 
       this.query = e.target.textContent.trim();
+
+      if (this.options.url) {
         this.launchedRequest = window.setTimeout(this.onSend.bind(this), this.options.delay || 300);
+        console.log(this.options.url);
+      }
+
       this.onResults();
     }
   }, {
     key: "finishRequest",
     value: function finishRequest(xhr) {
       this.wrapper.classList.remove('is-busy');
+      this.queued = false;
     }
   }, {
     key: "sendRequest",
     value: function sendRequest() {
       var _this2 = this;
 
-      var _cb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-
       var headers = _objectSpread({
         Accept: 'application/json',
-        'Cache-Control': 'no-cache',
         'X-Requested-With': 'XMLHttpRequest'
       }, this.options.headers || {});
 
@@ -5275,7 +5279,7 @@ var SimpleComplete = /*#__PURE__*/function () {
       if (!(200 <= xhr.status && xhr.status < 300)) {
         this.onError('simplecomplete.errors.xhr_wrong_status');
       } else {
-        var data = this.options.onResponse(response, xhr);
+        this.options.onResponse(response, xhr);
         this.onResults(response.data || response);
       }
     }
@@ -5284,6 +5288,11 @@ var SimpleComplete = /*#__PURE__*/function () {
     value: function onSend() {
       var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
+      if (this.launchedRequest !== null) {
+        window.clearTimeout(this.launchedRequest);
+        this.launchedRequest = null;
+      }
+
       if (!this.query || this.options.minLength > 0 && this.query.length < this.options.minLength) {
         this.onError('simplecomplete.errors.min-length');
       } else {
@@ -5291,16 +5300,7 @@ var SimpleComplete = /*#__PURE__*/function () {
           this.queued = true;
         } else if (this.options.url) {
           this.wrapper.classList.add('is-busy');
-          this.sendRequest(function (xhr) {
+          this.sendRequest();
-            console.log('DONE', xhr);
-          });
-          /*window.setTimeout(() => {
-          	this.wrapper.classList.remove('is-busy')
-          	if(this.queued) {
-          		this.queued = false
-          		this.onSend ()
-          	}
-          }, 3000)*/
         }
       }
     }
@@ -5370,7 +5370,7 @@ var SimpleComplete = /*#__PURE__*/function () {
       this.currentValue.classList.remove('is-empty');
       this.currentValue.innerHTML = '';
 
-      if (this.isMultiple() || this.isSelectElement()) {
+      if (this.isMultiple() && this.isSelectElement()) {
         var _opts = Array.from(this.element.selectedOptions);
 
         for (var _key in _opts) {
@@ -5397,15 +5397,28 @@ var SimpleComplete = /*#__PURE__*/function () {
       }
 
       if (!this.currentValue.childNodes.length) {
-        var placeholder = this.element.value || this.element.getAttribute('placeholder') || this.element.dataset.placeholder || this.options.placeholder || 'Search';
+        if (this.element.value) {
+          var _badge = SimpleComplete.createElement('SPAN', {
+            classes: 'selected-option'
+          });
+
+          var label = this.results.filter(function (item) {
+            return item.value == _this3.element.value;
+          }).map(function (item) {
+            return item.label || item.value;
+          }).shift();
+          _badge.textContent = label || this.element.value;
+          this.currentValue.appendChild(_badge);
+        } else {
+          var placeholder = this.element.getAttribute('placeholder') || this.element.dataset.placeholder || this.options.placeholder || 'Search';
 
           if (this.isSelectElement()) {
-          var _badge = SimpleComplete.createElement('SPAN', {
+            var _badge2 = SimpleComplete.createElement('SPAN', {
               classes: 'empty-item'
             });
 
-          _badge.textContent = placeholder;
+            _badge2.textContent = placeholder;
-          this.currentValue.appendChild(_badge);
+            this.currentValue.appendChild(_badge2);
           } else {
             this.currentValue.textContent = placeholder;
           }
@@ -5415,6 +5428,7 @@ var SimpleComplete = /*#__PURE__*/function () {
           }
         }
       }
+    }
   }, {
     key: "onError",
     value: function onError(key) {
@@ -5536,14 +5550,14 @@ var SimpleComplete = /*#__PURE__*/function () {
           this.resultsList.innerHTML = '';
 
           if (this.isSelectElement()) {
-            _toConsumableArray(this.element.options).forEach(function (option) {
+            _toConsumableArray(this.element.options).filter(this.filterResults.bind(this)).forEach(function (option) {
               _this5.resultsList.appendChild(_this5.renderOption({
                 value: option.value,
                 label: option.textContent
               }));
             });
           } else {
-            this.results.forEach(function (res) {
+            this.results.filter(this.filterResults.bind(this)).forEach(function (res) {
               return _this5.resultsList.appendChild(_this5.renderOption(res));
             });
           }
@@ -5554,12 +5568,27 @@ var SimpleComplete = /*#__PURE__*/function () {
             });
             emptyNode.textContent = this.options.emptyText || 'No results';
             this.resultsList.appendChild(emptyNode);
+            this.wrapper.classList.add('has-results');
+          } else {
+            this.wrapper.classList.remove('has-results');
           }
         }
       } catch (err) {
         this.onError(err);
       }
     }
+  }, {
+    key: "filterResults",
+    value: function filterResults(option) {
+      if (!this.query) {
+        return true;
+      }
+
+      var regexp = new RegExp(this.query, 'gi');
+      var label = option.label || option.textContent;
+      var check = label.matchAll(regexp);
+      return _toConsumableArray(check).length > 0;
+    }
   }, {
     key: "isSelected",
     value: function isSelected(_val) {