Version 2.0.0 => Release History for details

TarekRaafat · Dec 23, 2018 · 6ed5d53 · 6ed5d53
1 parent 3eb6493
commit 6ed5d53
Show file tree

Hide file tree

Showing 23 changed files with 482 additions and 460 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -12,6 +12,7 @@
         "curly": 2,
         "no-empty": 2,
         "new-cap": 2,
+        "no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
         "no-mixed-operators": 2,
         "no-nested-ternary": 2,
         "no-console": 2,
@@ -26,15 +27,15 @@
         "no-use-before-define": 2,
         "comma-dangle": 0,
         "eol-last": ["error", "never"],
-        "max-params": ["error", 3],
+        "max-params": ["error", 4],
         "no-inline-comments": 2,
         "no-trailing-spaces": 2,
         "no-underscore-dangle": 2,
         "spaced-comment": 2,
         "no-var": 2,
         "no-duplicate-imports": 2,
         "max-len": ["error", {
-            "code": 95
+            "code": 110
         }],
         "indent": [
             "error",

diff --git a/README.md b/README.md
@@ -19,20 +19,19 @@
 <br>
 <br>
 
-> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">Live Demo</a>
+> Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">Live Demo</a> **v2.0**
 
 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.
 
 ## Features
 
--   Simple & Easy to use
 -   Pure Vanilla Javascript
 -   Zero Dependencies
+-   Simple & Easy to use
 -   Lightweight
--   Lightning Fast
+-   Blazing Fast
 -   Versatile
--   Customizable
--   First Class Error Handling & Reporting
+-   Hackable & highly customizable
 
 ## [![autoComplete.js Code Example](./docs/img/autoComplete.init.png "autoComplete.js Code Example")](https://codepen.io/tarekraafat/pen/rQopdW)
 
@@ -53,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@1.5.4/dist/css/autoComplete.min.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.0.0/dist/css/autoComplete.min.css"/>
 ```
 
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@1.5.4/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/autoComplete.js@2.0.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
@@ -102,7 +102,7 @@
     border-bottom: 2px solid transparent;
 }
 
-.autoComplete_highlighted_result {
+.autoComplete_highlighted {
     opacity: 1;
     color: rgba(255, 122, 122, 1);
     font-weight: bold;

diff --git a/dist/css/main.css b/dist/css/main.css
@@ -26,6 +26,11 @@ body {
     -webkit-touch-callout: none;
 }
 
+#autoComplete_results_list {
+    height: 45vh;
+    overflow: auto;
+}
+
 h1 {
     color: rgba(255, 122, 122, 1);
     transition: var(--transition-1);
@@ -90,7 +95,7 @@ h4::selection {
 
 .toggeler:hover {
     width: 70px;
-    background-color: rgba(255, 122, 122, .7);
+    background-color: rgba(255, 122, 122, 0.7);
 }
 
 .toggeler::selection {
@@ -114,7 +119,7 @@ h4::selection {
 }
 
 .selection::selection {
-    color: #64CEAA;
+    color: #64ceaa;
 }
 
 .footer {

diff --git a/dist/index.html b/dist/index.html
@@ -6,7 +6,7 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<title>autoComplete.js - Vanilla Javascript library</title>
 		<meta name=”description" content=”Simple autocomplete pure vanilla Javascript library thats designed for speed, high versatility and seamless integration with wide range of projects and systems.”>
-		<meta name="keywords" content="autoComplete.js, autocomplete, easy-to-use, simple, pure, vanilla, javascript, js, library, speed, lightning, fast, search, suggestions, versatile, customizable, hackable, developer friendly, zero dependencies, lightweight, high integration, scalable, scalability, open source, github">
+		<meta name="keywords" content="autoComplete.js, autocomplete, easy-to-use, simple, pure, vanilla, javascript, js, library, speed, lightning, blazing, fast, search, suggestions, versatile, customizable, hackable, developer friendly, zero dependencies, lightweight, high integration, scalable, scalability, open source, github">
 		<meta name="subject" content="autoComplete Javascript Library">
 		<meta name="author" content="Tarek Raafat">
 		<meta name="copyright" content="Tarek Raafat">
@@ -56,11 +56,11 @@
 			</style>
 			<header class="header">
 				<h1>
-					<a href="https://github.com/TarekRaafat/autoComplete.js">autoComplete.js</a>
+					<a href="https://tarekraafat.github.io/autoComplete.js/">autoComplete.js</a>
 				</h1>
 			</header>
 			<div class="body" align="center">
-				<input id="autoComplete" type="text" placeholder="Loading..." tabindex="0">
+				<input id="autoComplete" type="text" tabindex="0">
 				<div class="mode">
 					<h4>mode</h4>
 					<div class="toggele">

diff --git a/dist/js/autoComplete.js b/dist/js/autoComplete.js
@@ -26,50 +26,59 @@
     return Constructor;
   }
 
-  var getSearchInput = function getSearchInput() {
-    return document.querySelector("#autoComplete");
+  var resultsList;
+  var getInput = function getInput(selector) {
+    return document.querySelector(selector);
   };
   var createResultsList = function createResultsList(renderResults) {
-    var list = document.createElement("ul");
-    list.setAttribute("id", "autoComplete_results_list");
-    renderResults.destination.insertAdjacentElement(renderResults.position, list);
+    resultsList = document.createElement("ul");
+    resultsList.setAttribute("id", "autoComplete_results_list");
+    renderResults.destination.insertAdjacentElement(renderResults.position, resultsList);
   };
   var highlight = function highlight(value) {
-    return "<span class=\"autoComplete_highlighted_result\">".concat(value, "</span>");
+    return "<span class=\"autoComplete_highlighted\">".concat(value, "</span>");
   };
-  var addResultsToList = function addResultsToList(results, cleanResults, dataAttribute) {
-    var resultsList = document.querySelector("#autoComplete_results_list");
-    results.forEach(function (event, record) {
+  var addResultsToList = function addResultsToList(dataSrc, dataKey, dataAttribute) {
+    dataSrc.forEach(function (event, record) {
       var result = document.createElement("li");
-      result.setAttribute("data-".concat(dataAttribute.tag), dataAttribute.value || cleanResults[record]);
-      result.setAttribute("id", cleanResults[record]);
+      var resultValue = dataSrc[record].source[dataKey] || dataSrc[record].source;
+      result.setAttribute("data-".concat(dataAttribute.tag), dataAttribute.value || resultValue);
+      result.setAttribute("id", resultValue);
       result.setAttribute("class", "autoComplete_result");
-      result.innerHTML = results[record];
+      result.innerHTML = dataSrc[record].match || dataSrc[record];
       resultsList.appendChild(result);
     });
   };
-  var clearInput = function clearInput() {
-    return getSearchInput().value = "";
+  var clearInput = function clearInput(selector) {
+    return getInput(selector).value = "";
   };
   var clearResults = function clearResults() {
-    var resultsList = document.querySelector("#autoComplete_results_list");
-    resultsList.innerHTML = "";
+    return resultsList.innerHTML = "";
   };
-  var getSelection = function getSelection(value) {
+  var getSelection = function getSelection(field, callback, resultsValues, dataKey) {
     var results = document.querySelectorAll(".autoComplete_result");
     results.forEach(function (selection) {
       selection.addEventListener("mousedown", function (event) {
-        value(event.target.closest(".autoComplete_result"));
-        clearInput();
+        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").id;
+          }).source
+        });
+        clearInput(field);
         clearResults();
       });
     });
   };
   var error = function error(_error) {
-    document.querySelector("body").innerHTML = "<div class=\"autoComplete_error\"><strong>Error</strong>, ".concat(_error, "</div>");
+    document.querySelector("body").innerHTML = "<div class=\"autoComplete_error\">".concat(_error, "</div>");
   };
-  var renderResults = {
-    getSearchInput: getSearchInput,
+  var autoCompleteView = {
+    getInput: getInput,
     createResultsList: createResultsList,
     highlight: highlight,
     addResultsToList: addResultsToList,
@@ -82,51 +91,42 @@
   function () {
     function autoComplete(config) {
       _classCallCheck(this, autoComplete);
-      this.dataSrc = function () {
-        if (Array.isArray(config.dataSrc)) {
-          return config.dataSrc;
-        } else if (Array.isArray(config.dataSrc())) {
-          return config.dataSrc();
-        }
+      this.selector = config.selector || "#autoComplete";
+      this.data = {
+        src: function src() {
+          return typeof config.data.src === "function" ? config.data.src() : config.data.src;
+        },
+        key: config.data.key
       };
       this.searchEngine = config.searchEngine === "loose" ? "loose" : "strict";
-      this.threshold = Number(config.threshold) || 0;
-      this.renderResults = renderResults.createResultsList(config.renderResults ? {
-        destination: config.renderResults.destination,
-        position: config.renderResults.position
-      } : {
-        destination: renderResults.getSearchInput(),
-        position: "afterend"
+      this.threshold = config.threshold || 0;
+      this.renderResults = autoCompleteView.createResultsList({
+        destination: config.renderResults ? config.renderResults.destination : autoCompleteView.getInput(this.selector),
+        position: config.renderResults ? config.renderResults.position : "afterend"
       });
-      this.placeHolder = String(config.placeHolder) ? config.placeHolder : false;
-      this.maxResults = Number(config.maxResults) || 5;
-      this.highlight = config.highlight === true ? true : false;
-      this.dataAttribute = config.dataAttribute === Object ? {
-        tag: config.dataAttribute.tag,
-        value: config.dataAttribute.value
-      } : {
-        tag: "autocomplete",
-        value: ""
+      this.placeHolder = config.placeHolder || "";
+      this.maxResults = config.maxResults || 5;
+      this.highlight = config.highlight || false;
+      this.dataAttribute = {
+        tag: config.dataAttribute ? config.dataAttribute.tag : "autocomplete",
+        value: config.dataAttribute ? config.dataAttribute.value : ""
       };
       this.onSelection = config.onSelection;
       this.init();
     }
     _createClass(autoComplete, [{
       key: "search",
       value: function search(query, record) {
+        var recordLowerCase = record.toLowerCase();
         if (this.searchEngine === "loose") {
-          query = query.replace(/ /g, "").toLowerCase();
+          query = query.replace(/ /g, "");
           var match = [];
           var searchPosition = 0;
-          for (var number = 0; number < record.length; number++) {
-            var recordChar = record[number];
-            if (searchPosition < query.length && recordChar.toLowerCase() === query[searchPosition]) {
-              if (this.highlight) {
-                recordChar = renderResults.highlight(recordChar);
-                searchPosition++;
-              } else {
-                searchPosition++;
-              }
+          for (var number = 0; number < recordLowerCase.length; number++) {
+            var recordChar = recordLowerCase[number];
+            if (searchPosition < query.length && recordChar === query[searchPosition]) {
+              recordChar = this.highlight ? autoCompleteView.highlight(recordChar) : recordChar;
+              searchPosition++;
             }
             match.push(recordChar);
           }
@@ -135,68 +135,69 @@
           }
           return match.join("");
         } else {
-          if (record.toLowerCase().includes(query.toLowerCase())) {
+          if (recordLowerCase.includes(query)) {
             if (this.highlight) {
-              return record.toLowerCase().replace(renderResults.getSearchInput().value.toLowerCase(), renderResults.highlight(renderResults.getSearchInput().value.toLowerCase()));
+              var inputValue = autoCompleteView.getInput(this.selector).value.toLowerCase();
+              return recordLowerCase.replace(inputValue, autoCompleteView.highlight(inputValue));
             } else {
-              return record;
+              return recordLowerCase;
             }
           }
         }
       }
     }, {
       key: "listMatchedResults",
-      value: function listMatchedResults() {
+      value: function listMatchedResults(data) {
         var _this = this;
         this.resList = [];
-        this.cleanResList = [];
-        var inputValue = renderResults.getSearchInput().value;
-        try {
-          this.dataSrc().filter(function (record) {
-            var match = _this.search(inputValue, record);
-            if (match) {
-              _this.resList.push(match);
-              _this.cleanResList.push(record);
-            }
-          });
-        } catch (error) {
-          renderResults.error(error);
-        }
-        renderResults.addResultsToList(this.resList.slice(0, this.maxResults), this.cleanResList.slice(0, this.maxResults), this.dataAttribute);
-      }
-    }, {
-      key: "searchInputValidation",
-      value: function searchInputValidation(selector) {
-        var _this2 = this;
-        selector.addEventListener("keyup", function () {
-          if (selector.value.length > _this2.threshold && selector.value !== " ") {
-            renderResults.clearResults();
-            _this2.listMatchedResults();
-            if (_this2.onSelection) {
-              renderResults.getSelection(_this2.onSelection);
-            }
-          } else {
-            renderResults.clearResults();
+        var inputValue = autoCompleteView.getInput(this.selector).value.toLowerCase();
+        data.filter(function (record) {
+          var match = _this.search(inputValue, record[_this.data.key] || record);
+          if (match) {
+            _this.resList.push({
+              match: match,
+              source: record
+            });
           }
         });
+        var list = this.resList.slice(0, this.maxResults);
+        autoCompleteView.addResultsToList(list, this.data.key, this.dataAttribute);
+        return list;
       }
     }, {
-      key: "setPlaceHolder",
-      value: function setPlaceHolder() {
-        if (this.placeHolder) {
-          renderResults.getSearchInput().setAttribute("placeholder", this.placeHolder);
+      key: "ignite",
+      value: function ignite(data) {
+        var _this2 = this;
+        if (this.data.src()) {
+          autoCompleteView.getInput(this.selector).setAttribute("placeholder", this.placeHolder);
+          var input = autoCompleteView.getInput(this.selector);
+          input.addEventListener("keyup", function () {
+            if (input.value.length > _this2.threshold && input.value !== " ") {
+              autoCompleteView.clearResults();
+              var list = _this2.listMatchedResults(data);
+              if (_this2.onSelection) {
+                autoCompleteView.getSelection(_this2.selector, _this2.onSelection, list, _this2.data.key);
+              }
+            } else {
+              autoCompleteView.clearResults();
+            }
+          });
         }
       }
     }, {
       key: "init",
       value: function init() {
+        var _this3 = this;
         try {
-          if (this.dataSrc()) {
-            this.setPlaceHolder();
-            this.searchInputValidation(renderResults.getSearchInput());
+          if (this.data.src() instanceof Promise) {
+            return this.data.src().then(function (data) {
+              return _this3.ignite(data);
+            });
+          } else {
+            return this.ignite(this.data.src());
           }
         } catch (error) {
-          renderResults.error(error);
+          autoCompleteView.error(error);
         }
       }
     }]);

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