Version 2.1.0 => Release History for details

TarekRaafat · Jan 5, 2019 · eab756c · eab756c
1 parent d7c9485
commit eab756c
Show file tree

Hide file tree

Showing 19 changed files with 465 additions and 213 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@
 <br>
 <br>
 
-> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v2.0**
+> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v2.1**
 
 autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed, high versatility and seamless integration with wide range of projects & systems, made for users and developers in mind.
 
@@ -52,13 +52,13 @@ git clone https://github.com/TarekRaafat/autoComplete.js.git
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.0.1/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.1.0/dist/css/autoComplete.min.css">
 ```
 
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.0.1/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.1.0/dist/js/autoComplete.min.js"></script>
 ```
 
 -   <a href="https://www.npmjs.com/package/@tarekraafat/autocomplete.js">npm</a> install `(Node Package Manager)`

diff --git a/dist/css/autoComplete.css b/dist/css/autoComplete.css
@@ -1,4 +1,10 @@
+#autoComplete_wrapper {
+    position: relative;
+    display: inline-block;
+}
+
 #autoComplete {
+    position: relative;
     padding: 0 2rem 0 3.5rem;
     height: 2.1rem;
     width: 6rem;
@@ -7,20 +13,32 @@
     border-radius: 50rem;
     border: 0.05rem solid rgb(255, 122, 122);
     caret-color: rgb(255, 122, 122);
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 0);
     background: url("./images/magnifier.svg") no-repeat center/10% 1.5rem;
     transition: all 0.4s ease;
     -webkit-transition: all -webkit-transform 0.4s ease;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
 }
 
 #autoComplete::placeholder {
     color: rgba(255, 122, 122, 0);
     transition: all 0.3s ease;
 }
 
+#autoComplete:hover::placeholder {
+    color: rgb(255, 122, 122, 0.3);
+    transition: all 0.3s ease;
+    -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+#autoComplete:focus::placeholder {
+    padding: 1rem 0.5rem;
+    font-size: 1rem;
+    color: rgb(255, 122, 122, 0.3);
+    transition: all 0.3s ease;
+    -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
 #autoComplete::selection {
     color: transparent;
 }
@@ -40,12 +58,6 @@
     -webkit-transition: all -webkit-transform 0.3s ease;
 }
 
-#autoComplete:hover::placeholder {
-    color: rgb(255, 122, 122, 0.3);
-    transition: all 0.3s ease;
-    -webkit-transition: all -webkit-transform 0.3s ease;
-}
-
 #autoComplete:focus {
     padding: 0 2rem 0 3.5rem;
     color: rgba(255, 122, 122, 1);
@@ -56,37 +68,41 @@
     box-shadow: rgba(255, 122, 122, 0.1) 0px 0px 20px 5px;
 }
 
-#autoComplete:focus::placeholder {
-    padding: 1rem 0.5rem;
-    font-size: 1rem;
-    color: rgb(255, 122, 122, 0.3);
-    transition: all 0.3s ease;
-    -webkit-transition: all -webkit-transform 0.3s ease;
-}
-
 #autoComplete_results_list {
+    position: fixed;
+    height: 45vh;
+    overflow: auto;
     z-index: 1000;
-    position: absolute;
-    margin: 0;
     padding: 0;
-    width: 100vw;
+    left: 0;
+    right: 0;
+    margin-top: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 18rem;
+    overflow: hidden;
     transition: all 0.1s ease-in-out;
     -webkit-transition: all -webkit-transform 0.1s ease;
 }
 
 .autoComplete_result {
     margin: 0.15rem auto;
     padding: 0.6rem;
-    max-width: 15em;
-    min-width: 8rem;
+    max-width: 280px;
     border: 0.05rem solid #e3e3e3;
     list-style: none;
-    text-align: center;
+    text-align: left;
     font-size: 1.1rem;
     color: rgb(123, 123, 123);
     text-transform: capitalize;
     transition: all 0.1s ease-in-out;
     background-color: #fff;
+    /* white-space: normal; */
+}
+
+.autoComplete_result::selection {
+    color: rgba(#ffffff, 0);
+    background-color: rgba(#ffffff, 0);
 }
 
 .autoComplete_result:last-child {
@@ -102,17 +118,24 @@
     border-bottom: 2px solid transparent;
 }
 
+.autoComplete_result:focus {
+    outline: none;
+    background-color: rgba(255, 248, 248, 0.9);
+    border-left: 2px solid rgba(255, 122, 122, 1);
+    border-right: 2px solid rgba(255, 122, 122, 1);
+    border-top: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+}
+
 .autoComplete_highlighted {
     opacity: 1;
     color: rgba(255, 122, 122, 1);
     font-weight: bold;
 }
 
-.autoComplete_error {
-    height: 100vh;
-    transform: translateY(45%);
-    text-align: center;
-    color: rgba(255, 122, 122, 1);
+.autoComplete_highlighted::selection {
+    color: rgba(#ffffff, 0);
+    background-color: rgba(#ffffff, 0);
 }
 
 @media only screen and (max-width: 600px) {

diff --git a/dist/css/main.css b/dist/css/main.css
@@ -27,10 +27,47 @@ body {
 }
 
 #autoComplete_results_list {
+    display: none;
     height: 45vh;
     overflow: auto;
 }
 
+.in {
+    padding: 0 2rem 0 3.5rem;
+    color: rgba(255, 122, 122, 1);
+    height: 3rem;
+    width: 16.5rem;
+    border: 0.05rem solid rgb(255, 122, 122);
+    background: url("./images/magnifier.svg") no-repeat left/15% 1.5rem;
+    box-shadow: rgba(255, 122, 122, 0.1) 0px 0px 20px 5px;
+    position: relative;
+    font-size: 1.2rem;
+    outline: none;
+    border-radius: 50rem;
+    border: 0.05rem solid rgb(255, 122, 122);
+    caret-color: rgb(255, 122, 122);
+    transition: all 0.4s ease;
+    -webkit-transition: all -webkit-transform 0.4s ease;
+    text-overflow: ellipsis;
+}
+
+.out {
+    position: relative;
+    padding: 0 2rem 0 3.5rem;
+    height: 2.1rem;
+    width: 6rem;
+    font-size: 1.2rem;
+    outline: none;
+    border-radius: 50rem;
+    border: 0.05rem solid rgb(255, 122, 122);
+    caret-color: rgb(255, 122, 122);
+    color: rgba(255, 255, 255, 0);
+    background: url("./images/magnifier.svg") no-repeat center/10% 1.5rem;
+    transition: all 0.4s ease;
+    -webkit-transition: all -webkit-transform 0.4s ease;
+    text-overflow: ellipsis;
+}
+
 h1 {
     color: rgba(255, 122, 122, 1);
     transition: var(--transition-1);

diff --git a/dist/index.html b/dist/index.html
@@ -60,7 +60,7 @@ <h1>
 				</h1>
 			</header>
 			<div class="body" align="center">
-				<input id="autoComplete" type="text" tabindex="0">
+				<input id="autoComplete" type="text" tabindex="1">
 				<div class="mode">
 					<h4>mode</h4>
 					<div class="toggele">

diff --git a/dist/js/autoComplete.js b/dist/js/autoComplete.js
@@ -27,45 +27,80 @@
   }
 
   var resultsList;
+  var dataAttribute = "data-result";
+  var select = {
+    resultsList: "autoComplete_results_list",
+    result: "autoComplete_result",
+    highlight: "autoComplete_highlighted"
+  };
   var getInput = function getInput(selector) {
     return typeof selector === "string" ? document.querySelector(selector) : selector();
   };
   var createResultsList = function createResultsList(renderResults) {
     resultsList = document.createElement("ul");
-    resultsList.setAttribute("id", "autoComplete_results_list");
+    resultsList.setAttribute("id", select.resultsList);
     renderResults.destination.insertAdjacentElement(renderResults.position, resultsList);
   };
   var highlight = function highlight(value) {
-    return "<span class=\"autoComplete_highlighted\">".concat(value, "</span>");
+    return "<span class=".concat(select.highlight, ">").concat(value, "</span>");
   };
   var addResultsToList = function addResultsToList(dataSrc, dataKey) {
     dataSrc.forEach(function (event, record) {
       var result = document.createElement("li");
       var resultValue = dataSrc[record].source[dataKey] || dataSrc[record].source;
-      result.setAttribute("autoComplete-data", resultValue);
-      result.setAttribute("class", "autoComplete_result");
+      result.setAttribute(dataAttribute, resultValue);
+      result.setAttribute("class", select.result);
+      result.setAttribute("tabindex", "1");
       result.innerHTML = dataSrc[record].match || dataSrc[record];
       resultsList.appendChild(result);
     });
   };
+  var navigation = function navigation(selector) {
+    var input = getInput(selector);
+    var first = resultsList.firstChild;
+    document.onkeydown = function (event) {
+      var active = document.activeElement;
+      switch (event.keyCode) {
+        case 38:
+          if (active !== first && active !== input) {
+            active.previousSibling.focus();
+          } else if (active === first) {
+            input.focus();
+          }
+          break;
+        case 40:
+          if (active === input && resultsList.childNodes.length > 0) {
+            first.focus();
+          } else if (active !== resultsList.lastChild) {
+            active.nextSibling.focus();
+          }
+          break;
+      }
+    };
+  };
   var clearResults = function clearResults() {
     return resultsList.innerHTML = "";
   };
   var getSelection = function getSelection(field, callback, resultsValues, dataKey) {
-    var results = resultsList.querySelectorAll(".autoComplete_result");
+    var results = resultsList.querySelectorAll(".".concat(select.result));
     results.forEach(function (selection) {
-      selection.addEventListener("mousedown", function (event) {
-        callback({
-          query: getInput(field).value,
-          results: resultsValues.map(function (record) {
-            return record.source;
-          }),
-          selection: resultsValues.find(function (value) {
-            var resValue = value.source[dataKey] || value.source;
-            return resValue === event.target.closest(".autoComplete_result").getAttribute("autoComplete-data");
-          }).source
+      ["mousedown", "keydown"].forEach(function (eventType) {
+        selection.addEventListener(eventType, function (event) {
+          if (eventType === "mousedown" || event.keyCode === 13) {
+            callback({
+              event: event,
+              query: getInput(field).value,
+              results: resultsValues.map(function (record) {
+                return record.source;
+              }),
+              selection: resultsValues.find(function (value) {
+                var resValue = value.source[dataKey] || value.source;
+                return resValue === event.target.closest(".".concat(select.result)).getAttribute(dataAttribute);
+              }).source
+            });
+            clearResults();
+          }
         });
-        clearResults();
       });
     });
   };
@@ -74,8 +109,9 @@
     createResultsList: createResultsList,
     highlight: highlight,
     addResultsToList: addResultsToList,
-    getSelection: getSelection,
-    clearResults: clearResults
+    navigation: navigation,
+    clearResults: clearResults,
+    getSelection: getSelection
   };
 
   var autoComplete =
@@ -95,7 +131,7 @@
         destination: config.renderResults ? config.renderResults.destination : autoCompleteView.getInput(this.selector),
         position: config.renderResults ? config.renderResults.position : "afterend"
       });
-      this.placeHolder = config.placeHolder || "";
+      this.placeHolder = config.placeHolder;
       this.maxResults = config.maxResults || 5;
       this.highlight = config.highlight || false;
       this.onSelection = config.onSelection;
@@ -148,25 +184,29 @@
         });
         var list = resList.slice(0, this.maxResults);
         autoCompleteView.addResultsToList(list, this.data.key);
+        autoCompleteView.navigation(this.selector);
         return list;
       }
     }, {
       key: "ignite",
       value: function ignite(data) {
         var _this2 = this;
         var selector = this.selector;
-        var onSelection = this.onSelection;
-        autoCompleteView.getInput(selector).setAttribute("placeholder", this.placeHolder);
         var input = autoCompleteView.getInput(selector);
-        input.addEventListener("keyup", function () {
+        var placeHolder = this.placeHolder;
+        var onSelection = this.onSelection;
+        if (placeHolder) {
+          input.setAttribute("placeholder", placeHolder);
+        }
+        input.onkeyup = function () {
           var clearResults = autoCompleteView.clearResults();
           if (input.value.length > _this2.threshold && input.value.replace(/ /g, "").length) {
             var list = _this2.listMatchedResults(data);
             if (onSelection) {
               autoCompleteView.getSelection(selector, onSelection, list, _this2.data.key);
             }
           }
-        });
+        };
       }
     }, {
       key: "init",

diff --git a/dist/js/autoComplete.js.gz b/dist/js/autoComplete.js.gz
diff --git a/dist/js/autoComplete.min.js b/dist/js/autoComplete.min.js
diff --git a/dist/js/autoComplete.min.js.gz b/dist/js/autoComplete.min.js.gz