Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@tarekraafat/autocomplete.js
Advanced tools
@tarekraafat/autocomplete.js - npm Package Compare versions
Comparing version 5.3.0 to 6.0.0
@@ -7,2 +7,3 @@ { | ||
| "extends": "eslint:recommended", | ||
| "parser": "babel-eslint", | ||
| "parserOptions": { | ||
@@ -15,3 +16,10 @@ "ecmaVersion": 6, | ||
| "no-empty": 2, | ||
| "new-cap": 2, | ||
| "new-caps": { | ||
| "newIsCap": true, | ||
| "capIsNew": true, | ||
| "newIsCapExceptions": [ | ||
| "autoComplete" | ||
| ] | ||
| }, | ||
| "no-constant-condition": 1, | ||
| "no-mixed-spaces-and-tabs": [ | ||
@@ -38,3 +46,3 @@ "error", | ||
| ], | ||
| "no-inline-comments": 2, | ||
| "no-inline-comments": 0, | ||
| "no-trailing-spaces": 2, | ||
@@ -41,0 +49,0 @@ "no-underscore-dangle": 2, |
@@ -40,6 +40,6 @@ (function (global, factory) { | ||
| var resultsList = document.createElement(renderResults.element); | ||
| resultsList.setAttribute("id", select.resultsList); | ||
| if (renderResults.container) { | ||
| select.resultsList = renderResults.container(resultsList) || select.resultsList; | ||
| renderResults.container(resultsList); | ||
| } | ||
| resultsList.setAttribute("id", select.resultsList); | ||
| renderResults.destination.insertAdjacentElement(renderResults.position, resultsList); | ||
@@ -58,3 +58,3 @@ return resultsList; | ||
| result.setAttribute("tabindex", "1"); | ||
| result.innerHTML = resultItem.content ? resultItem.content(event, result) : event.match || event; | ||
| resultItem.content ? resultItem.content(event, result) : result.innerHTML = event.match || event; | ||
| resultsList.appendChild(result); | ||
@@ -123,2 +123,36 @@ }); | ||
| var CustomEventPolyfill = function CustomEventPolyfill(event, params) { | ||
| params = params || { | ||
| bubbles: false, | ||
| cancelable: false, | ||
| detail: undefined | ||
| }; | ||
| var evt = document.createEvent("CustomEvent"); | ||
| evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); | ||
| return evt; | ||
| }; | ||
| CustomEventPolyfill.prototype = window.Event.prototype; | ||
| var CustomEventWrapper = typeof window.CustomEvent === "function" && window.CustomEvent || CustomEventPolyfill; | ||
| var initElementClosestPolyfill = function initElementClosestPolyfill() { | ||
| if (!Element.prototype.matches) { | ||
| Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; | ||
| } | ||
| if (!Element.prototype.closest) { | ||
| Element.prototype.closest = function (s) { | ||
| var el = this; | ||
| do { | ||
| if (el.matches(s)) { | ||
| return el; | ||
| } | ||
| el = el.parentElement || el.parentNode; | ||
| } while (el !== null && el.nodeType === 1); | ||
| return null; | ||
| }; | ||
| } | ||
| }; | ||
| var Polyfill = { | ||
| CustomEventWrapper: CustomEventWrapper, | ||
| initElementClosestPolyfill: initElementClosestPolyfill | ||
| }; | ||
| var autoComplete = | ||
@@ -136,2 +170,3 @@ function () { | ||
| }; | ||
| this.query = config.query; | ||
| this.searchEngine = config.searchEngine === "loose" ? "loose" : "strict"; | ||
@@ -144,13 +179,13 @@ this.threshold = config.threshold || 0; | ||
| container: | ||
| config.resultsList && config.resultsList.container | ||
| ? config.resultsList.container | ||
| : false, | ||
| config.resultsList && config.resultsList.container ? | ||
| config.resultsList.container : | ||
| false, | ||
| destination: | ||
| config.resultsList && config.resultsList.destination | ||
| ? config.resultsList.destination | ||
| : autoCompleteView.getInput(this.selector), | ||
| config.resultsList && config.resultsList.destination ? | ||
| config.resultsList.destination : | ||
| autoCompleteView.getInput(this.selector), | ||
| position: | ||
| config.resultsList && config.resultsList.position | ||
| ? config.resultsList.position | ||
| : "afterend", | ||
| config.resultsList && config.resultsList.position ? | ||
| config.resultsList.position : | ||
| "afterend", | ||
| element: config.resultsList && config.resultsList.element ? config.resultsList.element : "ul" | ||
@@ -209,3 +244,3 @@ }) : null | ||
| var search = function search(key) { | ||
| var match = _this.search(_this.inputValue, record[key] || record); | ||
| var match = _this.search(_this.queryValue, record[key] || record); | ||
| if (match && key) { | ||
@@ -270,2 +305,3 @@ resList.push({ | ||
| var input = autoCompleteView.getInput(selector); | ||
| var queryInterceptor = this.query; | ||
| var placeHolder = this.placeHolder; | ||
@@ -287,13 +323,15 @@ if (placeHolder) { | ||
| var exec = function exec(event) { | ||
| _this2.inputValue = input instanceof HTMLInputElement ? input.value.toLowerCase() : input.innerHTML.toLowerCase(); | ||
| var inputValue = input instanceof HTMLInputElement ? input.value.toLowerCase() : input.innerHTML.toLowerCase(); | ||
| var queryValue = _this2.queryValue = queryInterceptor && queryInterceptor.manipulate ? queryInterceptor.manipulate(inputValue) : inputValue; | ||
| var renderResultsList = _this2.resultsList.render; | ||
| var triggerCondition = _this2.inputValue.length > _this2.threshold && _this2.inputValue.replace(/ /g, "").length; | ||
| var triggerCondition = queryValue.length > _this2.threshold && queryValue.replace(/ /g, "").length; | ||
| var eventEmitter = function eventEmitter(event, results) { | ||
| input.dispatchEvent(new CustomEvent("autoComplete", { | ||
| input.dispatchEvent(new Polyfill.CustomEventWrapper("autoComplete", { | ||
| bubbles: true, | ||
| detail: { | ||
| event: event, | ||
| query: _this2.inputValue, | ||
| matches: results.matches, | ||
| results: results.list | ||
| input: inputValue, | ||
| query: queryValue, | ||
| matches: results ? results.matches : null, | ||
| results: results ? results.list : null | ||
| }, | ||
@@ -318,2 +356,4 @@ cancelable: true | ||
| }); | ||
| } else { | ||
| eventEmitter(event); | ||
| } | ||
@@ -324,2 +364,4 @@ } else if (!renderResultsList && triggerCondition) { | ||
| }); | ||
| } else { | ||
| eventEmitter(event); | ||
| } | ||
@@ -358,2 +400,3 @@ }; | ||
| } | ||
| Polyfill.initElementClosestPolyfill(); | ||
| } | ||
@@ -360,0 +403,0 @@ }]); |
@@ -1,1 +0,1 @@ | ||
| var a,b;a=this,b=function(){"use strict";function i(e,t){for(var n=0;n<t.length;n++){var s=t[n];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}var a="data-result",u={resultsList:"autoComplete_results_list",result:"autoComplete_result",highlight:"autoComplete_highlighted"},o=function(e){return"string"==typeof e?document.querySelector(e):e()},c=function(e){return e.innerHTML=""},h=o,r=function(e){var t=document.createElement(e.element);return e.container&&(u.resultsList=e.container(t)||u.resultsList),t.setAttribute("id",u.resultsList),e.destination.insertAdjacentElement(e.position,t),t},d=function(e){return"<span class=".concat(u.highlight,">").concat(e,"</span>")},l=function(i,r,l){r.forEach(function(e,t){var n=document.createElement(l.element),s=r[t].value[e.key]||r[t].value;n.setAttribute(a,s),n.setAttribute("class",u.result),n.setAttribute("tabindex","1"),n.innerHTML=l.content?l.content(e,n):e.match||e,i.appendChild(n)})},f=function(e,n){var s=o(e),i=n.firstChild;document.onkeydown=function(e){var t=document.activeElement;switch(e.keyCode){case 38:t!==i&&t!==s?t.previousSibling.focus():t===i&&s.focus();break;case 40:t===s&&0<n.childNodes.length?i.focus():t!==n.lastChild&&t.nextSibling.focus()}}},m=c,v=function(n,s,i,r){var l=s.querySelectorAll(".".concat(u.result));Object.keys(l).forEach(function(t){["mousedown","keydown"].forEach(function(e){l[t].addEventListener(e,function(t){"mousedown"!==e&&13!==t.keyCode&&39!==t.keyCode||(i({event:t,query:o(n)instanceof HTMLInputElement?o(n).value:o(n).innerHTML,matches:r.matches,results:r.list.map(function(e){return e.value}),selection:r.list.find(function(e){return(e.value[e.key]||e.value)===t.target.closest(".".concat(u.result)).getAttribute(a)})}),c(s))})})})};return function(){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.selector=e.selector||"#autoComplete",this.data={src:function(){return"function"==typeof e.data.src?e.data.src():e.data.src},key:e.data.key,cache:void 0===e.data.cache||e.data.cache},this.searchEngine="loose"===e.searchEngine?"loose":"strict",this.threshold=e.threshold||0,this.debounce=e.debounce||0,this.resultsList={render:!(!e.resultsList||!e.resultsList.render)&&e.resultsList.render,view:e.resultsList&&e.resultsList.render?r({container:!(!e.resultsList||!e.resultsList.container)&&e.resultsList.container,destination:e.resultsList&&e.resultsList.destination?e.resultsList.destination:h(this.selector),position:e.resultsList&&e.resultsList.position?e.resultsList.position:"afterend",element:e.resultsList&&e.resultsList.element?e.resultsList.element:"ul"}):null},this.sort=e.sort||!1,this.placeHolder=e.placeHolder,this.maxResults=e.maxResults||5,this.resultItem={content:!(!e.resultItem||!e.resultItem.content)&&e.resultItem.content,element:e.resultItem&&e.resultItem.element?e.resultItem.element:"li"},this.noResults=e.noResults,this.highlight=e.highlight||!1,this.onSelection=e.onSelection,this.dataSrc,this.init()}var e,n,s;return e=t,(n=[{key:"search",value:function(e,t){var n=this.highlight,s=t.toLowerCase();if("loose"===this.searchEngine){e=e.replace(/ /g,"");for(var i=[],r=0,l=0;l<s.length;l++){var a=t[l];r<e.length&&s[l]===e[r]&&(a=n?d(a):a,r++),i.push(a)}return r===e.length&&i.join("")}if(s.includes(e))return e=new RegExp("".concat(e),"i").exec(t),n?t.replace(e,d(e)):t}},{key:"listMatchedResults",value:function(n){var o=this;return new Promise(function(e){var u=[];n.filter(function(n,s){var e=function(e){var t=o.search(o.inputValue,n[e]||n);t&&e?u.push({key:e,index:s,match:t,value:n}):t&&!e&&u.push({index:s,match:t,value:n})};if(o.data.key){var t=!0,i=!1,r=void 0;try{for(var l,a=o.data.key[Symbol.iterator]();!(t=(l=a.next()).done);t=!0){e(l.value)}}catch(e){i=!0,r=e}finally{try{t||null==a.return||a.return()}finally{if(i)throw r}}}else e()});var t=o.sort?u.sort(o.sort).slice(0,o.maxResults):u.slice(0,o.maxResults);return o.resultsList.render&&(l(o.resultsList.view,t,o.resultItem),f(o.selector,o.resultsList.view)),e({matches:u.length,list:t})})}},{key:"ignite",value:function(){var l=this,a=this.selector,u=h(a),e=this.placeHolder;e&&u.setAttribute("placeholder",e);var n,s,i,r=function(t){l.inputValue=u instanceof HTMLInputElement?u.value.toLowerCase():u.innerHTML.toLowerCase();var e=l.resultsList.render,n=l.inputValue.length>l.threshold&&l.inputValue.replace(/ /g,"").length,s=function(e,t){u.dispatchEvent(new CustomEvent("autoComplete",{bubbles:!0,detail:{event:e,query:l.inputValue,matches:t.matches,results:t.list},cancelable:!0}))};if(e){var i=l.onSelection,r=l.resultsList.view;m(r);n&&l.listMatchedResults(l.dataSrc).then(function(e){s(t,e),0===e.list.length&&l.noResults&&l.resultsList.render?l.noResults():i&&v(a,r,i,e)})}else!e&&n&&l.listMatchedResults(l.dataSrc).then(function(e){s(t,e)})};u.addEventListener("keyup",(n=function(t){if(l.data.cache)r(t);else{var e=l.data.src();e instanceof Promise?e.then(function(e){l.dataSrc=e,r(t)}):(l.dataSrc=e,r(t))}},s=this.debounce,function(){var e=this,t=arguments;clearTimeout(i),i=setTimeout(function(){return n.apply(e,t)},s)}))}},{key:"init",value:function(){var t=this,e=this.data.src();e instanceof Promise?e.then(function(e){t.dataSrc=e,t.ignite()}):(this.dataSrc=e,this.ignite())}}])&&i(e.prototype,n),s&&i(e,s),t}()},"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):a.autoComplete=b(); | ||
| var a,b;a=this,b=function(){"use strict";function s(e,t){for(var n=0;n<t.length;n++){var s=t[n];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function l(e){return"string"==typeof e?document.querySelector(e):e()}function a(e){return e.innerHTML=""}function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}var u="data-result",n="autoComplete_results_list",c="autoComplete_result",t="autoComplete_highlighted",o=l,i=function(e){var t=document.createElement(e.element);return t.setAttribute("id",n),e.container&&e.container(t),e.destination.insertAdjacentElement(e.position,t),t},h=function(e){return"<span class=".concat(t,">").concat(e,"</span>")},r=function(i,r,o){r.forEach(function(e,t){var n=document.createElement(o.element),s=r[t].value[e.key]||r[t].value;n.setAttribute(u,s),n.setAttribute("class",c),n.setAttribute("tabindex","1"),o.content?o.content(e,n):n.innerHTML=e.match||e,i.appendChild(n)})},d=function(e,n){var s=l(e),i=n.firstChild;document.onkeydown=function(e){var t=document.activeElement;switch(e.keyCode){case 38:t!==i&&t!==s?t.previousSibling.focus():t===i&&s.focus();break;case 40:t===s&&0<n.childNodes.length?i.focus():t!==n.lastChild&&t.nextSibling.focus()}}},f=a,m=function(n,s,i,r){var o=s.querySelectorAll(".".concat(c));Object.keys(o).forEach(function(t){["mousedown","keydown"].forEach(function(e){o[t].addEventListener(e,function(t){"mousedown"!==e&&13!==t.keyCode&&39!==t.keyCode||(i({event:t,query:l(n)instanceof HTMLInputElement?l(n).value:l(n).innerHTML,matches:r.matches,results:r.list.map(function(e){return e.value}),selection:r.list.find(function(e){return(e.value[e.key]||e.value)===t.target.closest(".".concat(c)).getAttribute(u)})}),a(s))})})})};e.prototype=window.Event.prototype;var p={CustomEventWrapper:"function"==typeof window.CustomEvent&&window.CustomEvent||e,initElementClosestPolyfill:function(){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null})}};return function(){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.selector=e.selector||"#autoComplete",this.data={src:function(){return"function"==typeof e.data.src?e.data.src():e.data.src},key:e.data.key,cache:void 0===e.data.cache||e.data.cache},this.query=e.query,this.searchEngine="loose"===e.searchEngine?"loose":"strict",this.threshold=e.threshold||0,this.debounce=e.debounce||0,this.resultsList={render:!(!e.resultsList||!e.resultsList.render)&&e.resultsList.render,view:e.resultsList&&e.resultsList.render?i({container:!(!e.resultsList||!e.resultsList.container)&&e.resultsList.container,destination:e.resultsList&&e.resultsList.destination?e.resultsList.destination:o(this.selector),position:e.resultsList&&e.resultsList.position?e.resultsList.position:"afterend",element:e.resultsList&&e.resultsList.element?e.resultsList.element:"ul"}):null},this.sort=e.sort||!1,this.placeHolder=e.placeHolder,this.maxResults=e.maxResults||5,this.resultItem={content:!(!e.resultItem||!e.resultItem.content)&&e.resultItem.content,element:e.resultItem&&e.resultItem.element?e.resultItem.element:"li"},this.noResults=e.noResults,this.highlight=e.highlight||!1,this.onSelection=e.onSelection,this.dataSrc,this.init()}return function(e,t,n){t&&s(e.prototype,t),n&&s(e,n)}(t,[{key:"search",value:function(e,t){var n=this.highlight,s=t.toLowerCase();if("loose"===this.searchEngine){e=e.replace(/ /g,"");for(var i=[],r=0,o=0;o<s.length;o++){var l=t[o];r<e.length&&s[o]===e[r]&&(l=n?h(l):l,r++),i.push(l)}return r===e.length&&i.join("")}if(s.includes(e))return e=new RegExp("".concat(e),"i").exec(t),n?t.replace(e,h(e)):t}},{key:"listMatchedResults",value:function(n){var u=this;return new Promise(function(e){var a=[];n.filter(function(n,s){function e(e){var t=u.search(u.queryValue,n[e]||n);t&&e?a.push({key:e,index:s,match:t,value:n}):t&&!e&&a.push({index:s,match:t,value:n})}if(u.data.key){var t=!0,i=!1,r=void 0;try{for(var o,l=u.data.key[Symbol.iterator]();!(t=(o=l.next()).done);t=!0){e(o.value)}}catch(e){i=!0,r=e}finally{try{t||null==l.return||l.return()}finally{if(i)throw r}}}else e()});var t=u.sort?a.sort(u.sort).slice(0,u.maxResults):a.slice(0,u.maxResults);return u.resultsList.render&&(r(u.resultsList.view,t,u.resultItem),d(u.selector,u.resultsList.view)),e({matches:a.length,list:t})})}},{key:"ignite",value:function(){var a=this,u=this.selector,c=o(u),h=this.query,e=this.placeHolder;e&&c.setAttribute("placeholder",e);function n(t){function n(e,t){c.dispatchEvent(new p.CustomEventWrapper("autoComplete",{bubbles:!0,detail:{event:e,input:s,query:i,matches:t?t.matches:null,results:t?t.list:null},cancelable:!0}))}var s=c instanceof HTMLInputElement?c.value.toLowerCase():c.innerHTML.toLowerCase(),i=a.queryValue=h&&h.manipulate?h.manipulate(s):s,e=a.resultsList.render,r=i.length>a.threshold&&i.replace(/ /g,"").length;if(e){var o=a.onSelection,l=a.resultsList.view;f(l);r?a.listMatchedResults(a.dataSrc).then(function(e){n(t,e),0===e.list.length&&a.noResults&&a.resultsList.render?a.noResults():o&&m(u,l,o,e)}):n(t)}else!e&&r?a.listMatchedResults(a.dataSrc).then(function(e){n(t,e)}):n(t)}var s,i,r;c.addEventListener("keyup",(s=function(t){if(a.data.cache)n(t);else{var e=a.data.src();e instanceof Promise?e.then(function(e){a.dataSrc=e,n(t)}):(a.dataSrc=e,n(t))}},i=this.debounce,function(){var e=this,t=arguments;clearTimeout(r),r=setTimeout(function(){return s.apply(e,t)},i)}))}},{key:"init",value:function(){var t=this,e=this.data.src();e instanceof Promise?e.then(function(e){t.dataSrc=e,t.ignite()}):(this.dataSrc=e,this.ignite()),p.initElementClosestPolyfill()}}]),t}()},"object"==typeof exports&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):a.autoComplete=b(); |
| // autoComplete.js on type event emitter | ||
| document.querySelector("#autoComplete").addEventListener("autoComplete", event => { | ||
| console.log(event); | ||
| document.querySelector("#autoComplete").addEventListener("autoComplete", function(event) { | ||
| console.log(event.detail); | ||
| }); | ||
@@ -8,3 +8,3 @@ // The autoComplete.js Engine instance creator | ||
| data: { | ||
| src: async () => { | ||
| src: async function() { | ||
| // Loading placeholder text | ||
@@ -20,7 +20,16 @@ document.querySelector("#autoComplete").setAttribute("placeholder", "Loading..."); | ||
| }, | ||
| sort: (a, b) => { | ||
| if (a.match < b.match) return -1; | ||
| if (a.match > b.match) return 1; | ||
| sort: function(a, b) { | ||
| if (a.match < b.match) { | ||
| return -1; | ||
| } | ||
| if (a.match > b.match) { | ||
| return 1; | ||
| } | ||
| return 0; | ||
| }, | ||
| query: { | ||
| manipulate: function(query) { | ||
| return query.replace("pizza", "burger"); | ||
| } | ||
| }, | ||
| placeHolder: "Food & Drinks", | ||
@@ -35,5 +44,4 @@ selector: "#autoComplete", | ||
| render: true, | ||
| container: source => { | ||
| resultsListID = "autoComplete_results_list"; | ||
| return resultsListID; | ||
| container: function(source) { | ||
| source.setAttribute("id", "autoComplete_results_list"); | ||
| }, | ||
@@ -45,8 +53,8 @@ destination: document.querySelector("#autoComplete"), | ||
| resultItem: { | ||
| content: (data, source) => { | ||
| return `${data.match}`; | ||
| content: function(data, source) { | ||
| source.innerHTML = data.match; | ||
| }, | ||
| element: "li", | ||
| }, | ||
| noResults: () => { | ||
| noResults: function() { | ||
| const result = document.createElement("li"); | ||
@@ -58,3 +66,3 @@ result.setAttribute("class", "no_result"); | ||
| }, | ||
| onSelection: feedback => { | ||
| onSelection: function(feedback) { | ||
| const selection = feedback.selection.value.food; | ||
@@ -73,3 +81,3 @@ // Render selected choice to selection div | ||
| // On page load add class to input field | ||
| window.addEventListener("load", () => { | ||
| window.addEventListener("load", function() { | ||
| document.querySelector("#autoComplete").classList.add("out"); | ||
@@ -80,3 +88,3 @@ // document.querySelector("#autoComplete_results_list").style.display = "none"; | ||
| // Toggle Search Engine Type/Mode | ||
| document.querySelector(".toggeler").addEventListener("click", () => { | ||
| document.querySelector(".toggeler").addEventListener("click", function() { | ||
| // Holdes the toggle buttin alignment | ||
@@ -99,3 +107,3 @@ const toggele = document.querySelector(".toggele").style.justifyContent; | ||
| // Toggle results list and other elements | ||
| const action = action => { | ||
| const action = function(action) { | ||
| const github = document.querySelector(".github-corner"); | ||
@@ -124,8 +132,7 @@ const title = document.querySelector("h1"); | ||
| // showing & hidding results list onfocus / blur | ||
| // ["focus", "blur"].forEach(eventType => { | ||
| ["focus", "blur", "mousedown", "keydown"].forEach(eventType => { | ||
| ["focus", "blur", "mousedown", "keydown"].forEach(function(eventType) { | ||
| const input = document.querySelector("#autoComplete"); | ||
| const resultsList = document.querySelector("#autoComplete_results_list"); | ||
| document.querySelector("#autoComplete").addEventListener(eventType, event => { | ||
| document.querySelector("#autoComplete").addEventListener(eventType, function(event) { | ||
| // Hide results list & show other elemennts | ||
@@ -141,4 +148,4 @@ if (eventType === "blur") { | ||
| // Hide Results list when not used | ||
| document.addEventListener(eventType, event => { | ||
| var current = event.target; | ||
| document.addEventListener(eventType, function(event) { | ||
| const current = event.target; | ||
| if ( | ||
@@ -158,4 +165,4 @@ current === input || | ||
| // Toggle Input Classes on results list focus to keep style | ||
| ["focusin", "focusout", "keydown"].forEach(eventType => { | ||
| document.querySelector("#autoComplete_results_list").addEventListener(eventType, event => { | ||
| ["focusin", "focusout", "keydown"].forEach(function(eventType) { | ||
| document.querySelector("#autoComplete_results_list").addEventListener(eventType, function(event) { | ||
| if (eventType === "focusin") { | ||
@@ -162,0 +169,0 @@ if (event.target && event.target.nodeName === "LI") { |
@@ -5,3 +5,3 @@ <a href="https://tarekraafat.github.io/autoComplete.js/demo/"> | ||
| > Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">Live Demo</a> **v5.3** | ||
| > Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">Live Demo</a> **v6.0** | ||
@@ -8,0 +8,0 @@ autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed,<br>high versatility and seamless integration with wide range of projects & systems. |
| // autoComplete.js on type event emitter | ||
| document.querySelector("#autoComplete").addEventListener("type", event => { | ||
| document.querySelector("#autoComplete").addEventListener("autoComplete", function(event) { | ||
| console.log(event); | ||
@@ -9,3 +9,3 @@ }); | ||
| data: { | ||
| src: async () => { | ||
| src: async function() { | ||
| // Loading placeholder text | ||
@@ -28,5 +28,9 @@ document.querySelector("#autoComplete").setAttribute("placeholder", "Loading..."); | ||
| }, | ||
| sort: (a, b) => { | ||
| if (a.match < b.match) return -1; | ||
| if (a.match > b.match) return 1; | ||
| sort: function(a, b) { | ||
| if (a.match < b.match) { | ||
| return -1; | ||
| } | ||
| if (a.match > b.match) { | ||
| return 1; | ||
| } | ||
| return 0; | ||
@@ -42,4 +46,4 @@ }, | ||
| render: true, | ||
| container: source => { | ||
| resultsListID = "autoComplete_results_list"; | ||
| container: function() { | ||
| const resultsListID = "autoComplete_results_list"; | ||
| return resultsListID; | ||
@@ -52,3 +56,3 @@ }, | ||
| resultItem: { | ||
| content: (data, source) => { | ||
| content: function(data) { | ||
| return `${data.match}`; | ||
@@ -58,3 +62,3 @@ }, | ||
| }, | ||
| noResults: () => { | ||
| noResults: function() { | ||
| const result = document.createElement("li"); | ||
@@ -66,9 +70,9 @@ result.setAttribute("class", "no_result"); | ||
| }, | ||
| onSelection: feedback => { | ||
| onSelection: function(feedback) { | ||
| const title = feedback.selection.value.title; | ||
| const image = feedback.selection.value.image_url; | ||
| // Render selected choice to selection div | ||
| document.querySelector( | ||
| ".selection", | ||
| ).innerHTML = `<span style="display: block; font-size: 25px; width: 90vw; max-width: 400px; margin-bottom: 20px;">${title}</span><img src="${image}" style="height: 30vh; border-radius: 8px; box-shadow: 0 0 80px rgba(255, 122, 122,0.2), 0 4px 10px -3px rgba(255, 122, 122,0.4), inset 0 -10px 30px -5px rgba(255, 122, 122,0.1);"></img>`; | ||
| document.querySelector(".selection").innerHTML = ` | ||
| <span style="display: block; font-size: 25px; width: 90vw; max-width: 400px; margin-bottom: 20px;">${title}</span> | ||
| <img src="${image}" style="height: 30vh; border-radius: 8px; box-shadow: 0 0 80px rgba(255, 122, 122,0.2), 0 4px 10px -3px rgba(255, 122, 122,0.4), inset 0 -10px 30px -5px rgba(255, 122, 122,0.1);"></img>`; | ||
| // Clear Input | ||
@@ -84,9 +88,8 @@ document.querySelector("#autoComplete").value = ""; | ||
| // On page load add class to input field | ||
| window.addEventListener("load", () => { | ||
| window.addEventListener("load", function() { | ||
| document.querySelector("#autoComplete").classList.add("out"); | ||
| document.querySelector("#autoComplete_results_list").style.display = "none"; | ||
| }); | ||
| // Toggle Search Engine Type/Mode | ||
| document.querySelector(".toggeler").addEventListener("click", () => { | ||
| document.querySelector(".toggeler").addEventListener("click", function() { | ||
| // Holdes the toggle buttin alignment | ||
@@ -109,3 +112,3 @@ const toggele = document.querySelector(".toggele").style.justifyContent; | ||
| // Toggle results list and other elements | ||
| const action = action => { | ||
| const action = function(action) { | ||
| const github = document.querySelector(".github-corner"); | ||
@@ -134,8 +137,7 @@ const title = document.querySelector("h1"); | ||
| // showing & hidding results list onfocus / blur | ||
| // ["focus", "blur"].forEach(eventType => { | ||
| ["focus", "blur", "mousedown", "keydown"].forEach(eventType => { | ||
| ["focus", "blur", "mousedown", "keydown"].forEach(function(eventType) { | ||
| const input = document.querySelector("#autoComplete"); | ||
| const resultsList = document.querySelector("#autoComplete_results_list"); | ||
| document.querySelector("#autoComplete").addEventListener(eventType, event => { | ||
| document.querySelector("#autoComplete").addEventListener(eventType, function() { | ||
| // Hide results list & show other elemennts | ||
@@ -151,4 +153,4 @@ if (eventType === "blur") { | ||
| // Hide Results list when not used | ||
| document.addEventListener(eventType, event => { | ||
| var current = event.target; | ||
| document.addEventListener(eventType, function(event) { | ||
| const current = event.target; | ||
| if ( | ||
@@ -168,4 +170,4 @@ current === input || | ||
| // Toggle Input Classes on results list focus to keep style | ||
| ["focusin", "focusout", "keydown"].forEach(eventType => { | ||
| document.querySelector("#autoComplete_results_list").addEventListener(eventType, event => { | ||
| ["focusin", "focusout", "keydown"].forEach(function(eventType) { | ||
| document.querySelector("#autoComplete_results_list").addEventListener(eventType, function(event) { | ||
| if (eventType === "focusin") { | ||
@@ -172,0 +174,0 @@ if (event.target && event.target.nodeName === "LI") { |
@@ -10,3 +10,3 @@ # Introduction | ||
| ![\[Zero Dependencies\]()](https://img.shields.io/badge/Dependencies-0-blue.svg) | ||
| ![\[Size\]()](https://img.shields.io/badge/Size-5%20KB-green.svg) | ||
| ![\[Size\]()](https://img.shields.io/badge/Size-6%20KB-green.svg) | ||
| [](https://github.com/TarekRaafat/autoComplete.js) | ||
@@ -19,3 +19,3 @@ | ||
| > Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v5.3** | ||
| > Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v6.0** | ||
@@ -68,3 +68,3 @@ 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. | ||
| - <a href="https://www.jsdelivr.com/package/gh/TarekRaafat/autoComplete.js"><img src="https://www.jsdelivr.com/img/logo@2x.png" alt="jsDelivr" width="100px"></a> CDN | ||
| - <a href="https://www.jsdelivr.com/package/gh/TarekRaafat/autoComplete.js"><img src="./img/logos/jsdeliver_logo.png" alt="jsDelivr Logo" width="100px"></a> CDN | ||
@@ -74,3 +74,3 @@ `CSS` | ||
| ```html | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@5.3.0/dist/css/autoComplete.min.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@6.0.0/dist/css/autoComplete.min.css"> | ||
| ``` | ||
@@ -81,6 +81,6 @@ | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@5.3.0/dist/js/autoComplete.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@6.0.0/dist/js/autoComplete.min.js"></script> | ||
| ``` | ||
| - <img src="https://cdn0.iconfinder.com/data/icons/HTML5/512/HTML_Logo.png" alt="HTML" width="40px"> HTML Local load | ||
| - <img src="./img/logos/html_logo.png" alt="HTML Logo" width="40px"> HTML Local load | ||
@@ -91,3 +91,3 @@ ```html | ||
| - <img src="https://cdn0.iconfinder.com/data/icons/HTML5/512/HTML_Logo.png" alt="HTML" width="40px"> HTML Local load - ES6 module `(Use with Import)` | ||
| - <img src="./img/logos/html_logo.png" alt="HTML Logo" width="40px"> HTML Local load - ES6 module `(Use with Import)` | ||
@@ -98,3 +98,3 @@ ```html | ||
| - <img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript" width="40px"> Import module ES6 | ||
| - <img src="./img/logos/javascript_logo.png" alt="Javascript Logo" width="40px"> Import module ES6 | ||
@@ -111,3 +111,3 @@ ```js | ||
| - <a href="https://yarn.pm/@tarekraafat/autocomplete.js"><img src="https://yarnpkg.com/assets/og_image.png" alt="Yarn" width="80px"></a> install `(Javascript Package Manager)` | ||
| - <a href="https://yarn.pm/@tarekraafat/autocomplete.js"><img src="./img/logos/yarn_logo.png" alt="Yarn Logo" width="80px"></a> install `(Javascript Package Manager)` | ||
@@ -118,3 +118,3 @@ ```shell | ||
| - <img src="https://seeklogo.com/images/N/nodejs-logo-FBE122E377-seeklogo.com.png" alt="Node.js" width="30px"> Node.js | ||
| - <img src="./img/logos/nodejs_logo.png" alt="Node.js" width="30px"> Node.js | ||
@@ -134,3 +134,3 @@ ```js | ||
| OR | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@5.3.0/dist/css/autoComplete.min.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@6.0.0/dist/css/autoComplete.min.css"> | ||
| ``` | ||
@@ -150,3 +150,3 @@ | ||
| OR | ||
| <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@5.3.0/dist/js/autoComplete.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@6.0.0/dist/js/autoComplete.min.js"></script> | ||
| <script src="./js/index.js"></script> | ||
@@ -172,3 +172,8 @@ ``` | ||
| cache: false | ||
| }, | ||
| }, | ||
| query: { // Query Interceptor | (Optional) | ||
| manipulate: (query) => { | ||
| return query.replace("pizza", "burger"); | ||
| } | ||
| }, | ||
| sort: (a, b) => { // Sort rendered results ascendingly | (Optional) | ||
@@ -222,2 +227,3 @@ if (a.match < b.match) return -1; | ||
| | `data` | Data Source, Data Key & Data Caching | **1- src**: <br> - `Array` of `Strings` / `Objects`<br>**OR**<br> - `Function` => `Array` of `Strings` / `Objects` <br> **2- key**: <br>- `Array` of `Strings`<br>**Required** if `src` is `Object`, for search to point to desired `keys` <br> **3- Cache**: <br> - `True` for static data `src` <br> - `False` for dynamic data `src` "API" | Data `src` **REQUIRED** | | ||
| | `query` | Query Interceptor | **-** `Object` with 1 method<br> 1- manipulate: `Function` with (query) argument | Raw `Input` | | ||
| | `sort` | Sort rendered results | `Function` | Blank / Empty **(Random Results)** | | ||
@@ -229,4 +235,4 @@ | `placeHolder` | Place Holder text | `String` | Blank / Empty | | ||
| | `searchEngine` | Search Engine Type/Mode | **-** `"strict"` lowerCase string<br>**OR**<br>**-** `"loose"` lowerCase string | `"strict"` | | ||
| | `resultsList` | Rendered results list destination, position & element | **-** `Object` with 5 methods<br> 1- render: `Boolean` <br> 2- container: <br> `Function` (source) => `id`<br> 3- destination: `document.querySelector("#div")`<br> 4- position:<br> `"beforebegin"`, `"afterbegin"`, `"beforeend"`, `"afterend"` lowerCase string <br>**OR**<br>**-** `Function` ( ) => `{destination: "...", position: "..."}` <br> 5- element: <br> `"ul", "span", "div" or Custom`| `{render: false, container: (source) => { }, destination: document.querySelector("#autoComplete"), position: "afterend", element: "ul"}` | | ||
| | `resultItem` | Rendered result Item content & element | **-** `Object` with 2 methods<br> 1- content: <br>**-** `Function` (data, source) => `String` <br> **-** `data.match` has to be used for **Highlighted** result <br> 2- element: <br> `"li", "span", "div" or Custom` | `{content: (data, source) => data.match, element: "li"}` | | ||
| | `resultsList` | Rendered results list destination, position & element | **-** `Object` with 5 methods<br> 1- render: `Boolean` <br> 2- container: <br> `Function` with (source) argument<br> 3- destination: `document.querySelector("#div")`<br> 4- position:<br> `"beforebegin"`, `"afterbegin"`, `"beforeend"`, `"afterend"` lowerCase string <br>**OR**<br>**-** `Function` ( ) => `{destination: "...", position: "..."}` <br> 5- element: <br> `"ul", "span", "div" or Custom`| `{render: false, container: (source) => { ... }, destination: document.querySelector("#autoComplete"), position: "afterend", element: "ul"}` | | ||
| | `resultItem` | Rendered result Item content & element | **-** `Object` with 2 methods<br> 1- content: <br>**-** `Function` with (data, source) arguments <br> **-** `data.match` has to be used for **Highlighted** result <br> 2- element: <br> `"li", "span", "div" or Custom` | `{content: (data, source) => { ... }, element: "li"}` | | ||
| | `noResults` | Action script on noResults found | `Function` | No Action | | ||
@@ -246,3 +252,3 @@ | `highlight` | Highlight matching results | `Boolean` | `false` | | ||
| - Try it on [<img src="https://cdn.freelogovectors.net/wp-content/uploads/2018/03/codepen-logo.png" width="100px" alt="CodePen">](https://codepen.io/tarekraafat/pen/rQopdW?editors=0010) | ||
| - Try it on [<img src="./img/logos/codepen_logo.png" width="100px" alt="CodePen Logo">](https://codepen.io/tarekraafat/pen/rQopdW?editors=0010) | ||
@@ -280,3 +286,3 @@ [demo]: https://tarekraafat.github.io/autoComplete.js/demo/ | ||
| ## 5. What's New in v5.3? | ||
| ## 5. What's New in v6.0? | ||
@@ -305,5 +311,10 @@ Check out <a href="#/releases?id=versioning">Releases</a> Information :sparkles: | ||
| - [x] Multiple searchable `keys` for data `src` | ||
| - [ ] Reload data `src` on data change | ||
| - [x] Event emitter on input field events | ||
| - [x] Handling large data sets | ||
| - [x] Event emitter fires on cleared empty input field state | ||
| - [x] `Query` Interception & Manipulation | ||
| - [ ] Automatic deep search over all keys in multiple nested object data source | ||
| - [ ] Improve `Promise` usage for external data source handling | ||
| - [ ] Add `IndexedDB` for large data sets handling & offline usage | ||
| - [ ] Add `weights` on nearest possible results | ||
@@ -319,9 +330,5 @@ ### Usability: | ||
| - [x] Minimum characters length before results start getting rendered for more focused results | ||
| - [ ] More Results indicator if there are more than displayed | ||
| - [x] No matches found response & text | ||
| - [ ] Inline autocomplete nearest result | ||
| - [ ] Centralize Default values holder for easy access | ||
| - [x] API for Rendered result item customization | ||
| - [x] API for Rendered results list customization | ||
| - [ ] Add more use cases & examples to documentation | ||
| - [x] Capability for multiple instances | ||
@@ -332,3 +339,10 @@ - [x] Render `results` in default case | ||
| - [x] Serve results without rendering list through `resultsList.render` API | ||
| - [ ] `Inline` autoComplete to the nearest result value | ||
| - [ ] Add more use examples & cases of the library to the documentation | ||
| - [ ] Better code compression / optimization for the library to squeeze it under `[5kb]` | ||
| ### Reported Issues: | ||
| - [ ] Duplicate results because of mulitple data source `keys` | ||
| * * * | ||
@@ -335,0 +349,0 @@ |
@@ -29,3 +29,11 @@ ## Versioning | ||
| - v5.3.0 :sparkles: | ||
| - v6.0.0 :sparkles: | ||
| - `CustomEvent` & `Closest` method IE compatibility (Thanks @g-viet) | ||
| - Query interception (Thanks @barns101) | ||
| - Simplified `resultsList` & `resultItem` | ||
| - `EventEmitter` fires on clearing input field | ||
| - `EventEmitter` now has `input` method for row user’s input | ||
| - `EventEmitter` now has `query` method for intercepted user’s input | ||
| - v5.3.0 | ||
| - Get results from `eventEmitter` without rendering list through `resultsList.render` API | ||
@@ -32,0 +40,0 @@ - EventEmitter name `type` changed to `autoComplete` `[Changed]` |
| { | ||
| "name": "@tarekraafat/autocomplete.js", | ||
| "version": "5.3.0", | ||
| "version": "6.0.0", | ||
| "description": "Simple autocomplete pure vanilla Javascript library.", | ||
@@ -54,2 +54,3 @@ "main": "dist/js/autoComplete.js", | ||
| "acorn": "^6.1.1", | ||
| "babel-eslint": "^10.0.1", | ||
| "local-web-server": "^2.6.1", | ||
@@ -56,0 +57,0 @@ "rollup": "^0.67.4", |
@@ -10,3 +10,3 @@ # autoComplete.js :sparkles: | ||
| ![\[Zero Dependencies\]()](https://img.shields.io/badge/Dependencies-0-blue.svg) | ||
| ![\[Size\]()](https://img.shields.io/badge/Size-5%20KB-green.svg) | ||
| ![\[Size\]()](https://img.shields.io/badge/Size-6%20KB-green.svg) | ||
| [](https://github.com/TarekRaafat/autoComplete.js) | ||
@@ -24,3 +24,3 @@ | ||
| > Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v5.3** | ||
| > Simple autocomplete pure vanilla Javascript library. <a href="https://tarekraafat.github.io/autoComplete.js/demo/" target="\_blank">:rocket: Live Demo</a> **v6.0** | ||
@@ -58,3 +58,3 @@ 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. | ||
| ```html | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@5.3.0/dist/css/autoComplete.min.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@6.0.0/dist/css/autoComplete.min.css"> | ||
| ``` | ||
@@ -65,3 +65,3 @@ | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@5.3.0/dist/js/autoComplete.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@6.0.0/dist/js/autoComplete.min.js"></script> | ||
| ``` | ||
@@ -68,0 +68,0 @@ |
| import { autoCompleteView } from "../views/autoCompleteView"; | ||
| import { Polyfill } from "../helpers/polyfill"; | ||
@@ -16,2 +17,4 @@ export default class autoComplete { | ||
| }; | ||
| // Query Interceptor function | ||
| this.query = config.query; | ||
| // Search engine type | ||
@@ -26,31 +29,33 @@ this.searchEngine = config.searchEngine === "loose" ? "loose" : "strict"; | ||
| render: config.resultsList && config.resultsList.render ? config.resultsList.render : false, | ||
| view: config.resultsList && config.resultsList.render ? autoCompleteView.createResultsList({ | ||
| // Results List function | ||
| container: | ||
| // If resultsList and container are set | ||
| config.resultsList && config.resultsList.container | ||
| // Then set resultsList container | ||
| ? config.resultsList.container | ||
| // Else set default false | ||
| : false, | ||
| // Results List selector | ||
| destination: | ||
| // If resultsList and destination are set | ||
| config.resultsList && config.resultsList.destination | ||
| // Then set resultList destination | ||
| ? config.resultsList.destination | ||
| // Else set Default | ||
| : autoCompleteView.getInput(this.selector), | ||
| // Results List position | ||
| position: | ||
| // If resultsList and position are set | ||
| config.resultsList && config.resultsList.position | ||
| // Then resultsList position | ||
| ? config.resultsList.position | ||
| // Else set default "afterend" | ||
| : "afterend", | ||
| // Results List element tag | ||
| element: config.resultsList && config.resultsList.element | ||
| ? config.resultsList.element : "ul" | ||
| }) : null | ||
| view: | ||
| config.resultsList && config.resultsList.render | ||
| ? autoCompleteView.createResultsList({ | ||
| // Results List function | ||
| container: | ||
| // If resultsList and container are set | ||
| config.resultsList && config.resultsList.container | ||
| ? // Then set resultsList container | ||
| config.resultsList.container | ||
| : // Else set default false | ||
| false, | ||
| // Results List selector | ||
| destination: | ||
| // If resultsList and destination are set | ||
| config.resultsList && config.resultsList.destination | ||
| ? // Then set resultList destination | ||
| config.resultsList.destination | ||
| : // Else set Default | ||
| autoCompleteView.getInput(this.selector), | ||
| // Results List position | ||
| position: | ||
| // If resultsList and position are set | ||
| config.resultsList && config.resultsList.position | ||
| ? // Then resultsList position | ||
| config.resultsList.position | ||
| : // Else set default "afterend" | ||
| "afterend", | ||
| // Results List element tag | ||
| element: config.resultsList && config.resultsList.element ? config.resultsList.element : "ul", | ||
| }) | ||
| : null, | ||
| }; | ||
@@ -66,7 +71,5 @@ // Sorting results list | ||
| // Result Item function | ||
| content: config.resultItem && config.resultItem.content | ||
| ? config.resultItem.content : false, | ||
| content: config.resultItem && config.resultItem.content ? config.resultItem.content : false, | ||
| // Result Item element tag | ||
| element: config.resultItem && config.resultItem.element | ||
| ? config.resultItem.element : "li" | ||
| element: config.resultItem && config.resultItem.element ? config.resultItem.element : "li", | ||
| }; | ||
@@ -160,3 +163,3 @@ // No Results action | ||
| // Holds match value | ||
| const match = this.search(this.inputValue, record[key] || record); | ||
| const match = this.search(this.queryValue, record[key] || record); | ||
| // Push match to results list with key if set | ||
@@ -190,3 +193,3 @@ if (match && key) { | ||
| if (this.resultsList.render) { | ||
| // Rendering matching results to the UI list | ||
| // Rendering matching results to the UI list | ||
| autoCompleteView.addResultsToList(this.resultsList.view, list, this.resultItem); | ||
@@ -215,2 +218,4 @@ // Keyboard Arrow Navigation | ||
| const input = autoCompleteView.getInput(selector); | ||
| // Query Interceptor function | ||
| const queryInterceptor = this.query; | ||
| // Placeholder value holder | ||
@@ -231,5 +236,3 @@ const placeHolder = this.placeHolder; | ||
| clearTimeout(inDebounce); | ||
| inDebounce = setTimeout(() => | ||
| func.apply(context, args) | ||
| , delay); | ||
| inDebounce = setTimeout(() => func.apply(context, args), delay); | ||
| }; | ||
@@ -239,7 +242,9 @@ }; | ||
| // Excute autoComplete processes | ||
| const exec = (event) => { | ||
| const exec = event => { | ||
| // Gets the input search value | ||
| this.inputValue = input instanceof HTMLInputElement | ||
| ? input.value.toLowerCase() | ||
| : input.innerHTML.toLowerCase(); | ||
| const inputValue = | ||
| input instanceof HTMLInputElement ? input.value.toLowerCase() : input.innerHTML.toLowerCase(); | ||
| // Intercept query value | ||
| const queryValue = this.queryValue = queryInterceptor && queryInterceptor.manipulate | ||
| ? queryInterceptor.manipulate(inputValue) : inputValue; | ||
| // resultsList Render Switch | ||
@@ -249,3 +254,3 @@ const renderResultsList = this.resultsList.render; | ||
| const triggerCondition = | ||
| (this.inputValue.length > this.threshold && this.inputValue.replace(/ /g, "").length); | ||
| queryValue.length > this.threshold && queryValue.replace(/ /g, "").length; | ||
| // Event emitter on input field | ||
@@ -255,16 +260,18 @@ const eventEmitter = (event, results) => { | ||
| input.dispatchEvent( | ||
| new CustomEvent("autoComplete", { | ||
| new Polyfill.CustomEventWrapper("autoComplete", { | ||
| bubbles: true, | ||
| detail: { | ||
| event, | ||
| query: this.inputValue, | ||
| matches: results.matches, | ||
| results: results.list, | ||
| input: inputValue, | ||
| query: queryValue, | ||
| matches: results ? results.matches : null, | ||
| results: results? results.list : null, | ||
| }, | ||
| cancelable: true, | ||
| })); | ||
| }), | ||
| ); | ||
| }; | ||
| // Checks if results will be rendered or NOT | ||
| if(renderResultsList){ | ||
| if (renderResultsList) { | ||
| // onSelection function holder | ||
@@ -280,13 +287,13 @@ const onSelection = this.onSelection; | ||
| if (triggerCondition) { | ||
| // List matching results | ||
| // List matching results | ||
| this.listMatchedResults(this.dataSrc).then(list => { | ||
| // Event emitter on input field | ||
| // Event emitter on input field | ||
| eventEmitter(event, list); | ||
| // Checks if there's results | ||
| if (list.list.length === 0 && this.noResults && this.resultsList.render) { | ||
| // Runs noResults action function | ||
| // Runs noResults action function | ||
| this.noResults(); | ||
| } else { | ||
| // Gets user's selection | ||
| // If action configured | ||
| // Gets user's selection | ||
| // If action configured | ||
| if (onSelection) { | ||
@@ -298,11 +305,16 @@ autoCompleteView.getSelection(selector, resultsList, onSelection, list); | ||
| } else { | ||
| // clears all results list | ||
| // Event emitter on input field | ||
| eventEmitter(event); | ||
| // clears all results list | ||
| clearResults; | ||
| } | ||
| // If results will NOT be rendered | ||
| // If results will NOT be rendered | ||
| } else if (!renderResultsList && triggerCondition) { | ||
| this.listMatchedResults(this.dataSrc).then(list => { | ||
| // Event emitter on input field | ||
| // Event emitter on input field | ||
| eventEmitter(event, list); | ||
| }); | ||
| } else { | ||
| // Event emitter on input field | ||
| eventEmitter(event); | ||
| } | ||
@@ -312,25 +324,28 @@ }; | ||
| // Input field handler fires an event onKeyup action | ||
| input.addEventListener("keyup", debounce((event) => { | ||
| // If data src NOT to be cached | ||
| // then we should invoke its function again | ||
| if (!this.data.cache) { | ||
| const data = this.data.src(); | ||
| // Check if data src is a Promise | ||
| // and resolve it before setting data src | ||
| if (data instanceof Promise) { | ||
| data.then(response => { | ||
| this.dataSrc = response; | ||
| input.addEventListener( | ||
| "keyup", | ||
| debounce(event => { | ||
| // If data src NOT to be cached | ||
| // then we should invoke its function again | ||
| if (!this.data.cache) { | ||
| const data = this.data.src(); | ||
| // Check if data src is a Promise | ||
| // and resolve it before setting data src | ||
| if (data instanceof Promise) { | ||
| data.then(response => { | ||
| this.dataSrc = response; | ||
| exec(event); | ||
| }); | ||
| // Else if not Promise | ||
| } else { | ||
| this.dataSrc = data; | ||
| exec(event); | ||
| }); | ||
| // Else if not Promise | ||
| } | ||
| // Else if data src is local | ||
| // not external src | ||
| } else { | ||
| this.dataSrc = data; | ||
| exec(event); | ||
| } | ||
| // Else if data src is local | ||
| // not external src | ||
| } else { | ||
| exec(event); | ||
| } | ||
| }, this.debounce)); | ||
| }, this.debounce), | ||
| ); | ||
| } | ||
@@ -358,3 +373,6 @@ | ||
| } | ||
| // Polyfilling for IE11 | ||
| Polyfill.initElementClosestPolyfill(); | ||
| } | ||
| } | ||
| } |
@@ -5,3 +5,3 @@ const dataAttribute = "data-result"; | ||
| result: "autoComplete_result", | ||
| highlight: "autoComplete_highlighted" | ||
| highlight: "autoComplete_highlighted", | ||
| }; | ||
@@ -27,6 +27,6 @@ | ||
| const resultsList = document.createElement(renderResults.element); | ||
| resultsList.setAttribute("id", select.resultsList); | ||
| if (renderResults.container) { | ||
| select.resultsList = renderResults.container(resultsList) || select.resultsList; | ||
| renderResults.container(resultsList); | ||
| } | ||
| resultsList.setAttribute("id", select.resultsList); | ||
| renderResults.destination.insertAdjacentElement(renderResults.position, resultsList); | ||
@@ -61,3 +61,3 @@ return resultsList; | ||
| result.setAttribute("tabindex", "1"); | ||
| result.innerHTML = resultItem.content ? resultItem.content(event, result) : event.match || event; | ||
| resultItem.content ? resultItem.content(event, result) : (result.innerHTML = event.match || event); | ||
| resultsList.appendChild(result); | ||
@@ -125,5 +125,4 @@ }); | ||
| event, | ||
| query: getInput(field) instanceof HTMLInputElement | ||
| ? getInput(field).value | ||
| : getInput(field).innerHTML, | ||
| query: | ||
| getInput(field) instanceof HTMLInputElement ? getInput(field).value : getInput(field).innerHTML, | ||
| matches: resultsValues.matches, | ||
@@ -134,3 +133,3 @@ results: resultsValues.list.map(record => record.value), | ||
| return resValue === event.target.closest(`.${select.result}`).getAttribute(dataAttribute); | ||
| }) | ||
| }), | ||
| }); | ||
@@ -152,3 +151,3 @@ // Clear Results after selection is made | ||
| clearResults, | ||
| getSelection | ||
| getSelection, | ||
| }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by11.67%
67
- Lines of code
- increased by0.97%
11961
Worsened metrics
- Total package byte prevSize
- decreased by-1.82%
1365530
- Dev dependency count
- increased by10%
11
No dependency changes