Added "threshold" option, code optimizations, reduced weight & update…

…d documentation.
TarekRaafat · Dec 20, 2018 · d9116b3 · d9116b3
1 parent 86472b2
commit d9116b3
Show file tree

Hide file tree

Showing 28 changed files with 90 additions and 68 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -24,7 +24,7 @@
         "wrap-iife": 2,
         "no-unused-vars": 2,
         "no-use-before-define": 2,
-        "comma-dangle": ["error", "always"],
+        "comma-dangle": 0,
         "eol-last": ["error", "never"],
         "max-params": ["error", 3],
         "no-inline-comments": 2,
@@ -33,6 +33,9 @@
         "spaced-comment": 2,
         "no-var": 2,
         "no-duplicate-imports": 2,
+        "max-len": ["error", {
+            "code": 95
+        }],
         "indent": [
             "error",
             "tab"

diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@
 
 > Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">Live Demo</a>
 
-autoComplete.js is a simple pure vanilla Javascript library that's designed for speed, high versatility and seamless integration with wide range of projects & systems, made for users and developers in mind.
+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
 
@@ -53,13 +53,13 @@ git clone https://github.com/TarekRaafat/autoComplete.js.git
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected].2/dist/css/autoComplete.min.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected].3/dist/css/autoComplete.min.css"/>
 ```
 
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected].2/dist/js/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TarekRaafat/[email protected].3/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/index.html b/dist/index.html
@@ -2,16 +2,16 @@
 <html lang="en">
 
 	<head>
-		<meta charset="utf-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<title>autoComplete.js - Vanilla Javascript</title>
-		<meta name="”description”" content="”autoComplete.js" is an easy-to-use simple pure vanilla Javascript library thats built for speed, high versatility and seamless integration with wide range of projects and systems.” />
-		<meta name="keywords" content="autoComplete.js, easy-to-use, simple, pure, vanilla, Javascript, JS, library, speed, Lightning, fast, Versatile, Customizable, hackable, developer friendly, zero, no, Dependencies, Lightweight, high, integration, scalable, scalability, open source, open, source, guthub" />
-		<meta name="author" content="Tarek Raafat" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" type="text/css" media="screen" href="./css/autoComplete.css" />
-		<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css" />
-		<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" />
+		<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="author" content="Tarek Raafat">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" type="text/css" media="screen" href="./css/autoComplete.css">
+		<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
+		<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
 	</head>
 
 	<body>
@@ -57,7 +57,7 @@ <h1>
 				</h1>
 			</header>
 			<div class="body" align="center">
-				<input id="autoComplete" type="text" placeholder="Loading..." tabindex="0" />
+				<input id="autoComplete" type="text" placeholder="Loading..." tabindex="0">
 				<div class="mode">
 					<h4>mode</h4>
 					<div class="toggele">

diff --git a/dist/js/autoComplete.js b/dist/js/autoComplete.js
@@ -90,6 +90,7 @@
         }
       };
       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
@@ -98,7 +99,7 @@
         position: "afterend"
       });
       this.placeHolder = String(config.placeHolder) ? config.placeHolder : false;
-      this.maxResults = Number(config.maxResults) ? config.maxResults : 10;
+      this.maxResults = Number(config.maxResults) || 5;
       this.highlight = config.highlight === true ? true : false;
       this.dataAttribute = config.dataAttribute === Object ? {
         tag: config.dataAttribute.tag,
@@ -130,17 +131,15 @@
             match.push(recordChar);
           }
           if (searchPosition !== query.length) {
-            return "";
+            return false;
           }
           return match.join("");
         } else {
           if (record.toLowerCase().includes(query.toLowerCase())) {
             if (this.highlight) {
-              this.resList.push(record.toLowerCase().replace(renderResults.getSearchInput().value.toLowerCase(), renderResults.highlight(renderResults.getSearchInput().value.toLowerCase())));
-              this.cleanResList.push(record);
+              return record.toLowerCase().replace(renderResults.getSearchInput().value.toLowerCase(), renderResults.highlight(renderResults.getSearchInput().value.toLowerCase()));
             } else {
-              this.resList.push(record);
-              this.cleanResList.push(record);
+              return record;
             }
           }
         }
@@ -170,7 +169,7 @@
       value: function searchInputValidation(selector) {
         var _this2 = this;
         selector.addEventListener("keyup", function () {
-          if (selector.value.length > 0 && selector.value !== " ") {
+          if (selector.value.length > _this2.threshold && selector.value !== " ") {
             renderResults.clearResults();
             _this2.listMatchedResults();
             if (_this2.onSelection) {

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