v10.2.0 => #249 #224 #189

TarekRaafat · Jul 3, 2021 · cf91a85 · cf91a85
1 parent 33962b7
commit cf91a85
Show file tree

Hide file tree

Showing 25 changed files with 259 additions and 239 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,10 @@ autoComplete.js is a simple, pure vanilla Javascript library progressively desig
 -  Pure Vanilla Javascript
 -  Zero Dependencies
 -  Simple & Lightweight
+-  Powerful Search Engine with two different modes
+-  Diacritics Support
+-  Debounce Support
+-  Life Cycle Events
 -  Useful plugin API
 -  WAI-ARIA Compliant
 -  Highly Customizable
@@ -47,13 +51,13 @@ autoComplete.js is a simple, pure vanilla Javascript library progressively desig
 `JS`
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/autoComplete.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.0/dist/autoComplete.min.js"></script>
 ```
 
 `CSS`
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.1.5/dist/css/autoComplete.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.0/dist/css/autoComplete.min.css">
 ```
 #### Package Manager
 

diff --git a/dist/autoComplete.js b/dist/autoComplete.js
@@ -229,11 +229,11 @@
   var checkTrigger = function checkTrigger(query, condition, threshold) {
     return condition ? condition(query) : query.length >= threshold;
   };
-  var mark = function mark(value, klass) {
+  var mark = function mark(value, cls) {
     return create("mark", _objectSpread2({
       innerHTML: value
-    }, typeof klass === "string" && {
-      "class": klass
+    }, typeof cls === "string" && {
+      "class": cls
     })).outerHTML;
   };
 
@@ -349,7 +349,6 @@
     eventEmitter("results", ctx);
   };
 
-  var classes;
   var Expand = "aria-expanded";
   var Active = "aria-activedescendant";
   var Selected = "aria-selected";
@@ -404,7 +403,10 @@
     eventEmitter("close", ctx);
   };
   var goTo = function goTo(index, ctx) {
-    var results = ctx.list.getElementsByTagName(ctx.resultItem.tag);
+    var list = ctx.list,
+        resultItem = ctx.resultItem;
+    var results = list.getElementsByTagName(resultItem.tag);
+    var cls = resultItem.selected ? resultItem.selected.split(" ") : false;
     if (ctx.isOpen && results.length) {
       var _results$index$classL;
       var state = ctx.cursor;
@@ -414,12 +416,12 @@
       if (state > -1) {
         var _results$state$classL;
         results[state].removeAttribute(Selected);
-        if (classes) (_results$state$classL = results[state].classList).remove.apply(_results$state$classL, _toConsumableArray(classes));
+        if (cls) (_results$state$classL = results[state].classList).remove.apply(_results$state$classL, _toConsumableArray(cls));
       }
       results[index].setAttribute(Selected, true);
-      if (classes) (_results$index$classL = results[index].classList).add.apply(_results$index$classL, _toConsumableArray(classes));
+      if (cls) (_results$index$classL = results[index].classList).add.apply(_results$index$classL, _toConsumableArray(cls));
       ctx.input.setAttribute(Active, results[ctx.cursor].id);
-      ctx.list.scrollTop = results[index].offsetTop - ctx.list.clientHeight + results[index].clientHeight + 5;
+      list.scrollTop = results[index].offsetTop - list.clientHeight + results[index].clientHeight + 5;
       ctx.feedback.cursor = ctx.cursor;
       feedback(ctx, index);
       eventEmitter("navigate", ctx);
@@ -446,44 +448,35 @@
     var items = Array.from(ctx.list.querySelectorAll(itemTag));
     var item = event.target.closest(itemTag);
     if (item && item.nodeName === itemTag) {
-      event.preventDefault();
       var index = items.indexOf(item);
       select(ctx, event, index);
     }
   };
   var navigate = function navigate(event, ctx) {
-    var key = event.keyCode;
-    var selected = ctx.resultItem.selected;
-    if (selected) classes = selected.split(" ");
-    switch (key) {
+    switch (event.keyCode) {
       case 40:
       case 38:
         event.preventDefault();
-        key === 40 ? next(ctx) : previous(ctx);
+        event.keyCode === 40 ? next(ctx) : previous(ctx);
         break;
       case 13:
-        event.preventDefault();
-        if (ctx.cursor >= 0) {
-          select(ctx, event);
-        }
+        if (!ctx.submit) event.preventDefault();
+        if (ctx.cursor >= 0) select(ctx, event);
         break;
       case 9:
         if (ctx.resultsList.tabSelect && ctx.cursor >= 0) {
           event.preventDefault();
           select(ctx, event);
-        } else {
-          close(ctx);
         }
         break;
       case 27:
-        event.preventDefault();
         ctx.input.value = "";
         close(ctx);
         break;
     }
   };
 
-  function start (ctx) {
+  function start (ctx, q) {
     var _this = this;
     return new Promise(function ($return, $error) {
       var input, query, trigger, threshold, resultsList, queryVal, condition;
@@ -492,7 +485,7 @@
       trigger = ctx.trigger;
       threshold = ctx.threshold;
       resultsList = ctx.resultsList;
-      queryVal = getQuery(input);
+      queryVal = q || getQuery(input);
       queryVal = query ? query(queryVal) : queryVal;
       condition = checkTrigger(queryVal, trigger, threshold);
       if (condition) {
@@ -519,7 +512,7 @@
   var eventsManager = function eventsManager(events, callback) {
     for (var element in events) {
       for (var event in events[element]) {
-        callback(event, element);
+        callback(element, event);
       }
     }
   };
@@ -557,17 +550,17 @@
         }
       }
     };
-    eventsManager(privateEvents, function (event, element) {
-      if (!resultsList && element === "list") return;
+    eventsManager(privateEvents, function (element, event) {
+      if (!resultsList && event !== "input") return;
       if (publicEvents[element][event]) return;
       publicEvents[element][event] = privateEvents[element][event];
     });
-    eventsManager(publicEvents, function (event, element) {
+    eventsManager(publicEvents, function (element, event) {
       ctx[element].addEventListener(event, publicEvents[element][event]);
     });
   };
   var removeEvents = function removeEvents(ctx) {
-    eventsManager(ctx.events, function (event, element) {
+    eventsManager(ctx.events, function (element, event) {
       ctx[element].removeEventListener(event, ctx.events[element][event]);
     });
   };
@@ -628,8 +621,8 @@
     prototype.init = function () {
       init(this);
     };
-    prototype.start = function () {
-      start(this);
+    prototype.start = function (query) {
+      start(this, query);
     };
     prototype.unInit = function () {
       if (this.wrapper) {

diff --git a/dist/autoComplete.js.gz b/dist/autoComplete.js.gz
diff --git a/dist/autoComplete.min.js b/dist/autoComplete.min.js
diff --git a/dist/autoComplete.min.js.gz b/dist/autoComplete.min.js.gz
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -10,7 +10,7 @@ API configuration options, methods and events
 
 ### name <sub><sup>(optional)</sup></sub>
 
-> Global instance name where all elements inherit their class & id names
+> Responsible for the global instance naming where all elements inherit their class & id names
 
 - Type: `String`
 - Default: `autoComplete`
@@ -26,9 +26,9 @@ name: "autoComplete",
 ### selector <sub><sup>(optional)</sup></sub>
 
 
-> Input field selector
+> Responsible for the input, textarea, or contentEditable element selection
 
-- Type: `String` of [selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) | `Function`
+- Type: `String` of [selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) | `Function` returns `Element`
 - Default: `#autoComplete`
 
 ##### Example
@@ -54,7 +54,7 @@ selector: () => {
 ### wrapper <sub><sup>(optional)</sup></sub>
 
 
-> Wrapper div container
+> Responsible for rendering the `div` that wraps the `input` and the `list` element
 
 - Type: `Boolean`
 - Default: `true`
@@ -69,7 +69,7 @@ wrapper: false,
 
 ### data <sub><sup>(required)</sup></sub>
 
-> Data Source
+> Responsible for the data source selection
 
 - Type: `Object`
 
@@ -154,7 +154,7 @@ data: {
 
 ### trigger <sub><sup>(optional)</sup></sub>
 
-> Event & Condition rules that trigger autoComplete.js engine to start
+> Responsible for Event & Condition rules that trigger autoComplete.js engine to start
 
 - Type: `Function` returns `Boolean`
   - Parameters: (`query`)
@@ -172,7 +172,7 @@ trigger: (query) => {
 
 ### query <sub><sup>(optional)</sup></sub>
 
-> Query interceptor
+> Responsible for Query interception & manipulation
 
 - Type: `Function` returns `String`
   - Parameters: (`input`)
@@ -190,7 +190,7 @@ query: (input) => {
 
 ### placeHolder <sub><sup>(optional)</sup></sub>
 
-> Input field placeholder value
+> Responsible for the input field placeholder value setting
 
 - Type: `String`
 - Default: `Blank/Empty`
@@ -205,7 +205,7 @@ placeHolder: "Search...",
 
 ### threshold <sub><sup>(optional)</sup></sub>
 
-> Minimum characters length for autoComplete.js engine to start
+> Responsible for setting threshold value of the minimum characters length where autoComplete.js engine starts
 
 - Type: `Integer`
 - Default: `1`
@@ -220,7 +220,7 @@ threshold: 2,
 
 ### debounce <sub><sup>(optional)</sup></sub>
 
-> Delay duration after done typing for autoComplete.js engine to start
+> Responsible for setting delay time duration that counts after typing is done for autoComplete.js engine to start
 
 - Type: `Integer`
 - Default: `0`
@@ -235,7 +235,7 @@ debounce: 300, // Milliseconds value
 
 ### searchEngine <sub><sup>(optional)</sup></sub>
 
-> Search engine Type/Mode
+> Responsible for setting the Search engine Type/Mode or custom engine
 
 - Type: `String` | `Function`
   - `String` lowerCase `"strict"` | `"loose"`
@@ -252,7 +252,7 @@ searchEngine: "strict",
 
 ### diacritics <sub><sup>(optional)</sup></sub>
 
-> Search engine diacritics handler
+> Responsible for turning on/off language diacritics supported search
 
 - Type: `Boolean`
 - Default: `false`
@@ -267,7 +267,7 @@ diacritics: true,
 
 ### resultsList <sub><sup>(optional)</sup></sub>
 
-> Rendered results list element interceptor and customizer
+> Responsible for the results list element rendering, interception, and customizing
 
 - Type: `Object` | `Boolean` for disabling list rendering
 
@@ -331,7 +331,7 @@ resultsList: {
 
 ### resultItem <sub><sup>(optional)</sup></sub>
 
-> Rendered result item element customizer and interceptor
+> Responsible for the result item element rendering, interception, and customizing
 
 - Type: `Object`
 
@@ -378,9 +378,24 @@ resultItem: {
 
 ***
 
+### submit <sub><sup>(optional)</sup></sub>
+
+> Responsible for the `Enter` button default behavior
+
+- Type: `Boolean`
+- Default: `false`
+
+##### Example:
+
+```js
+submit: true,
+```
+
+***
+
 ### events <sub><sup>(optional)</sup></sub>
 
-> Input field & Results list events additions or overriding
+> Responsible for the input field and results list events additions or overriding
 
 - Type: `Object`
   - input: `Object` of functions with the [event](https://developer.mozilla.org/en-US/docs/Web/Events) type name
@@ -432,21 +447,27 @@ autoCompleteJS.init();
 
 ***
 
-### start()
+### start(query)
 
-> Runs `start()` core function which is responsible for the following tasks in order:
+> Runs `start(query)` core function which is responsible for the following tasks in order:
 
-1. Getting the `input` query value
+1. Getting the `input` query value if NOT passed as an argument
 2. Manipulating `query` value
 3. Checking `trigger` condition validity to proceed
 4. Fetching `data` from `src` or `store` if cached
 5. Start matching results
 6. Rendering `list` if enabled
 
+Arguments:
+- query: `String` <sub><sup>(optional)</sup></sub>
+
+Defaults:
+- query: `input` query value
+
 ##### Example:
 
 ```js
-autoCompleteJS.start();
+autoCompleteJS.start("tea");
 ```
 
 ***
@@ -455,10 +476,10 @@ autoCompleteJS.start();
 
 > autoComplete.js powerful search engine
 
-Parameters:
+Arguments:
 - query: `String`
 - record: `String`
-- options: `Object`
+- options: `Object` <sub><sup>(optional)</sup></sub>
   - mode: `String`
     - `"strict"` search mode
     - `"loose"` search mode
@@ -523,7 +544,7 @@ autoCompleteJS.previous();
 
 > Navigates to a specific `resultItem` on the list by its `index` number
 
-Parameters:
+Arguments:
 - index: `Number`
 
 Defaults:
@@ -542,8 +563,8 @@ autoCompleteJS.gotTo(1);
 
 > Selects a `resultItem` from the list by its `index` number
 
-Parameters:
-- index: `Number`
+Arguments:
+- index: `Number` <sub><sup>(optional)</sup></sub>
 
 Defaults:
 - index: current cursor position
@@ -570,7 +591,7 @@ autoCompleteJS.close();
 
 ### unInit()
 
-> Removes all the event listeners on the `_events` list
+> Removes all the event listeners on the `events` list
 
 ##### Example: