diff --git a/README.md b/README.md index ff8e6f8..3b5a5b2 100644 --- a/README.md +++ b/README.md @@ -51,13 +51,13 @@ autoComplete.js is a simple, pure vanilla Javascript library progressively desig `JS` ```html - + ``` `CSS` ```html - + ``` #### Package Manager diff --git a/dist/autoComplete.js b/dist/autoComplete.js index b2ac08a..f28e2ac 100644 --- a/dist/autoComplete.js +++ b/dist/autoComplete.js @@ -464,10 +464,7 @@ if (ctx.cursor >= 0) select(ctx, event); break; case 9: - if (ctx.resultsList.tabSelect && ctx.cursor >= 0) { - event.preventDefault(); - select(ctx, event); - } + if (ctx.resultsList.tabSelect && ctx.cursor >= 0) select(ctx, event); break; case 27: ctx.input.value = ""; diff --git a/dist/autoComplete.js.gz b/dist/autoComplete.js.gz index 3640c18..4d33b55 100644 Binary files a/dist/autoComplete.js.gz and b/dist/autoComplete.js.gz differ diff --git a/dist/autoComplete.min.js b/dist/autoComplete.min.js index cc5edec..df5e706 100644 --- a/dist/autoComplete.min.js +++ b/dist/autoComplete.min.js @@ -1 +1 @@ -var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,s=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw s}}}}(n.keys);try{for(f.s();!(l=f.n()).done;)c(l.value)}catch(e){f.e(e)}finally{f.f()}}else c()})),n.filter&&(u=n.filter(u));var c=u.slice(0,s.maxResults);t.feedback={query:e,matches:u,results:c},f("results",t)},m="aria-expanded",v="aria-activedescendant",y="aria-selected",b=function(e,n){e.feedback.selection=t({index:n},e.feedback.results[n])},g=function(e){e.isOpen||((e.wrapper||e.input).setAttribute(m,!0),e.list.removeAttribute("hidden"),e.isOpen=!0,f("open",e))},w=function(e){e.isOpen&&((e.wrapper||e.input).setAttribute(m,!1),e.input.setAttribute(v,""),e.list.setAttribute("hidden",""),e.isOpen=!1,f("close",e))},O=function(e,t){var n=t.list,r=t.resultItem,o=n.getElementsByTagName(r.tag),s=!!r.selected&&r.selected.split(" ");if(t.isOpen&&o.length){var a,u,c=t.cursor;e>=o.length&&(e=0),e<0&&(e=o.length-1),t.cursor=e,c>-1&&(o[c].removeAttribute(y),s&&(u=o[c].classList).remove.apply(u,i(s))),o[e].setAttribute(y,!0),s&&(a=o[e].classList).add.apply(a,i(s)),t.input.setAttribute(v,o[t.cursor].id),n.scrollTop=o[e].offsetTop-n.clientHeight+o[e].clientHeight+5,t.feedback.cursor=t.cursor,b(t,e),f("navigate",t)}},A=function(e){var t=e.cursor+1;O(t,e)},S=function(e){var t=e.cursor-1;O(t,e)},k=function(e,t,n){(n=n>=0?n:e.cursor)<0||(e.feedback.event=t,b(e,n),f("selection",e),w(e))};function j(e,n){var r=this;return new Promise((function(i,o){var s,a,c,l,f,p,m;return s=e.input,a=e.query,c=e.trigger,l=e.threshold,f=e.resultsList,p=n||((m=s)instanceof HTMLInputElement||m instanceof HTMLTextAreaElement?m.value:m.innerHTML),function(e,t,n){return t?t(e):e.length>=n}(p=a?a(p):p,c,l)?d(e).then((function(n){try{return e.feedback instanceof Error?i():(h(p,e),f&&function(e){var n=e.resultsList,r=e.list,i=e.resultItem,o=e.feedback;o.query;var s=o.matches,a=o.results;if(e.cursor=-1,r.innerHTML="",s.length||n.noResults){var c=document.createDocumentFragment();a.forEach((function(e,n){var r=u(i.tag,t({id:"".concat(i.id,"_").concat(n),role:"option",innerHTML:e.match,inside:c},i.class&&{class:i.class}));i.element&&i.element(r,e)})),r.append(c),n.element&&n.element(r,o),g(e)}else w(e)}(e),v.call(r))}catch(e){return o(e)}}),o):(w(e),v.call(r));function v(){return i()}}))}var L=function(e,t){for(var n in e)for(var r in e[n])t(n,r)},T=function(e){var n=e.events;e.trigger;var r=e.debounce,i=e.resultsList,o=function(e,t){var n;return function(){clearTimeout(n),n=setTimeout((function(){return e()}),t)}}((function(){return j(e)}),r),s=e.events=t({input:t({},n&&n.input)},i&&{list:n?t({},n.list):{}}),a={input:{input:function(){o()},keydown:function(t){!function(e,t){switch(e.keyCode){case 40:case 38:e.preventDefault(),40===e.keyCode?A(t):S(t);break;case 13:t.submit||e.preventDefault(),t.cursor>=0&&k(t,e);break;case 9:t.resultsList.tabSelect&&t.cursor>=0&&(e.preventDefault(),k(t,e));break;case 27:t.input.value="",w(t)}}(t,e)},blur:function(){w(e)}},list:{mousedown:function(e){e.preventDefault()},click:function(t){!function(e,t){var n=t.resultItem.tag.toUpperCase(),r=Array.from(t.list.querySelectorAll(n)),i=e.target.closest(n);if(i&&i.nodeName===n){var o=r.indexOf(i);k(t,e,o)}}(t,e)}}};L(a,(function(e,t){(i||"input"===t)&&(s[e][t]||(s[e][t]=a[e][t]))})),L(s,(function(t,n){e[t].addEventListener(n,s[t][n])}))};function E(e){var n=this;return new Promise((function(r,i){var o,s,a,c,l,p;if(o=e.name,s=e.input,a=e.placeHolder,c=e.resultsList,l=e.data,p={role:"combobox","aria-owns":c.id,"aria-haspopup":!0,"aria-expanded":!1},u(s,t(t({"aria-controls":c.id,"aria-autocomplete":"both"},a&&{placeholder:a}),!e.wrapper&&t({},p))),e.wrapper&&(e.wrapper=u("div",t({around:s,class:o+"_wrapper"},p))),c&&(e.list=u(c.tag,t({dest:["string"==typeof c.destination?document.querySelector(c.destination):c.destination(),c.position],id:c.id,role:"listbox",hidden:"hidden"},c.class&&{class:c.class}))),l.cache)return d(e).then((function(e){try{return h.call(n)}catch(e){return i(e)}}),i);function h(){return T(e),f("init",e),r()}return h.call(n)}))}function x(e){var t=e.prototype;t.init=function(){E(this)},t.start=function(e){j(this,e)},t.unInit=function(){if(this.wrapper){var e=this.wrapper.parentNode;e.insertBefore(this.input,this.wrapper),e.removeChild(this.wrapper)}var t;L((t=this).events,(function(e,n){t[e].removeEventListener(n,t.events[e][n])}))},t.open=function(){g(this)},t.close=function(){w(this)},t.goTo=function(e){O(e,this)},t.next=function(){A(this)},t.previous=function(){S(this)},t.select=function(e){k(this,null,e)},e.search=t.search=function(e,t,n){p(e,t,n)}}return function e(t){this.options=t,this.id=e.instances=(e.instances||0)+1,this.name="autoComplete",this.wrapper=1,this.threshold=1,this.debounce=0,this.resultsList={position:"afterend",tag:"ul",maxResults:5},this.resultItem={tag:"li"},function(e){var t=e.id,r=e.name,i=e.options,o=e.resultsList,s=e.resultItem;for(var a in i)if("object"===n(i[a]))for(var u in e[a]||(e[a]={}),i[a])e[a][u]=i[a][u];else e[a]=i[a];e.selector=e.selector||"#"+r,o.destination=o.destination||e.selector,o.id=o.id||r+"_list_"+t,s.id=s.id||r+"_result",e.input="string"==typeof e.selector?document.querySelector(e.selector):e.selector()}(this),x.call(this,e),E(this)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).autoComplete=t(); +var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,s=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw s}}}}(n.keys);try{for(f.s();!(l=f.n()).done;)c(l.value)}catch(e){f.e(e)}finally{f.f()}}else c()})),n.filter&&(u=n.filter(u));var c=u.slice(0,s.maxResults);t.feedback={query:e,matches:u,results:c},f("results",t)},m="aria-expanded",v="aria-activedescendant",y="aria-selected",b=function(e,n){e.feedback.selection=t({index:n},e.feedback.results[n])},g=function(e){e.isOpen||((e.wrapper||e.input).setAttribute(m,!0),e.list.removeAttribute("hidden"),e.isOpen=!0,f("open",e))},w=function(e){e.isOpen&&((e.wrapper||e.input).setAttribute(m,!1),e.input.setAttribute(v,""),e.list.setAttribute("hidden",""),e.isOpen=!1,f("close",e))},O=function(e,t){var n=t.list,r=t.resultItem,o=n.getElementsByTagName(r.tag),s=!!r.selected&&r.selected.split(" ");if(t.isOpen&&o.length){var a,u,c=t.cursor;e>=o.length&&(e=0),e<0&&(e=o.length-1),t.cursor=e,c>-1&&(o[c].removeAttribute(y),s&&(u=o[c].classList).remove.apply(u,i(s))),o[e].setAttribute(y,!0),s&&(a=o[e].classList).add.apply(a,i(s)),t.input.setAttribute(v,o[t.cursor].id),n.scrollTop=o[e].offsetTop-n.clientHeight+o[e].clientHeight+5,t.feedback.cursor=t.cursor,b(t,e),f("navigate",t)}},A=function(e){var t=e.cursor+1;O(t,e)},S=function(e){var t=e.cursor-1;O(t,e)},k=function(e,t,n){(n=n>=0?n:e.cursor)<0||(e.feedback.event=t,b(e,n),f("selection",e),w(e))};function j(e,n){var r=this;return new Promise((function(i,o){var s,a,c,l,f,p,m;return s=e.input,a=e.query,c=e.trigger,l=e.threshold,f=e.resultsList,p=n||((m=s)instanceof HTMLInputElement||m instanceof HTMLTextAreaElement?m.value:m.innerHTML),function(e,t,n){return t?t(e):e.length>=n}(p=a?a(p):p,c,l)?d(e).then((function(n){try{return e.feedback instanceof Error?i():(h(p,e),f&&function(e){var n=e.resultsList,r=e.list,i=e.resultItem,o=e.feedback;o.query;var s=o.matches,a=o.results;if(e.cursor=-1,r.innerHTML="",s.length||n.noResults){var c=document.createDocumentFragment();a.forEach((function(e,n){var r=u(i.tag,t({id:"".concat(i.id,"_").concat(n),role:"option",innerHTML:e.match,inside:c},i.class&&{class:i.class}));i.element&&i.element(r,e)})),r.append(c),n.element&&n.element(r,o),g(e)}else w(e)}(e),v.call(r))}catch(e){return o(e)}}),o):(w(e),v.call(r));function v(){return i()}}))}var L=function(e,t){for(var n in e)for(var r in e[n])t(n,r)},T=function(e){var n=e.events;e.trigger;var r=e.debounce,i=e.resultsList,o=function(e,t){var n;return function(){clearTimeout(n),n=setTimeout((function(){return e()}),t)}}((function(){return j(e)}),r),s=e.events=t({input:t({},n&&n.input)},i&&{list:n?t({},n.list):{}}),a={input:{input:function(){o()},keydown:function(t){!function(e,t){switch(e.keyCode){case 40:case 38:e.preventDefault(),40===e.keyCode?A(t):S(t);break;case 13:t.submit||e.preventDefault(),t.cursor>=0&&k(t,e);break;case 9:t.resultsList.tabSelect&&t.cursor>=0&&k(t,e);break;case 27:t.input.value="",w(t)}}(t,e)},blur:function(){w(e)}},list:{mousedown:function(e){e.preventDefault()},click:function(t){!function(e,t){var n=t.resultItem.tag.toUpperCase(),r=Array.from(t.list.querySelectorAll(n)),i=e.target.closest(n);if(i&&i.nodeName===n){var o=r.indexOf(i);k(t,e,o)}}(t,e)}}};L(a,(function(e,t){(i||"input"===t)&&(s[e][t]||(s[e][t]=a[e][t]))})),L(s,(function(t,n){e[t].addEventListener(n,s[t][n])}))};function E(e){var n=this;return new Promise((function(r,i){var o,s,a,c,l,p;if(o=e.name,s=e.input,a=e.placeHolder,c=e.resultsList,l=e.data,p={role:"combobox","aria-owns":c.id,"aria-haspopup":!0,"aria-expanded":!1},u(s,t(t({"aria-controls":c.id,"aria-autocomplete":"both"},a&&{placeholder:a}),!e.wrapper&&t({},p))),e.wrapper&&(e.wrapper=u("div",t({around:s,class:o+"_wrapper"},p))),c&&(e.list=u(c.tag,t({dest:["string"==typeof c.destination?document.querySelector(c.destination):c.destination(),c.position],id:c.id,role:"listbox",hidden:"hidden"},c.class&&{class:c.class}))),l.cache)return d(e).then((function(e){try{return h.call(n)}catch(e){return i(e)}}),i);function h(){return T(e),f("init",e),r()}return h.call(n)}))}function x(e){var t=e.prototype;t.init=function(){E(this)},t.start=function(e){j(this,e)},t.unInit=function(){if(this.wrapper){var e=this.wrapper.parentNode;e.insertBefore(this.input,this.wrapper),e.removeChild(this.wrapper)}var t;L((t=this).events,(function(e,n){t[e].removeEventListener(n,t.events[e][n])}))},t.open=function(){g(this)},t.close=function(){w(this)},t.goTo=function(e){O(e,this)},t.next=function(){A(this)},t.previous=function(){S(this)},t.select=function(e){k(this,null,e)},e.search=t.search=function(e,t,n){p(e,t,n)}}return function e(t){this.options=t,this.id=e.instances=(e.instances||0)+1,this.name="autoComplete",this.wrapper=1,this.threshold=1,this.debounce=0,this.resultsList={position:"afterend",tag:"ul",maxResults:5},this.resultItem={tag:"li"},function(e){var t=e.id,r=e.name,i=e.options,o=e.resultsList,s=e.resultItem;for(var a in i)if("object"===n(i[a]))for(var u in e[a]||(e[a]={}),i[a])e[a][u]=i[a][u];else e[a]=i[a];e.selector=e.selector||"#"+r,o.destination=o.destination||e.selector,o.id=o.id||r+"_list_"+t,s.id=s.id||r+"_result",e.input="string"==typeof e.selector?document.querySelector(e.selector):e.selector()}(this),x.call(this,e),E(this)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).autoComplete=t(); diff --git a/dist/autoComplete.min.js.gz b/dist/autoComplete.min.js.gz index 0d94ffc..1dca7f4 100644 Binary files a/dist/autoComplete.min.js.gz and b/dist/autoComplete.min.js.gz differ diff --git a/docs/demo/index.html b/docs/demo/index.html index c6e74dc..4b466b1 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -72,7 +72,7 @@ + href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.1/dist/css/autoComplete.min.css"> @@ -150,7 +150,7 @@

mode

- + diff --git a/docs/demo/js/autoComplete.js b/docs/demo/js/autoComplete.js index b2ac08a..f28e2ac 100644 --- a/docs/demo/js/autoComplete.js +++ b/docs/demo/js/autoComplete.js @@ -464,10 +464,7 @@ if (ctx.cursor >= 0) select(ctx, event); break; case 9: - if (ctx.resultsList.tabSelect && ctx.cursor >= 0) { - event.preventDefault(); - select(ctx, event); - } + if (ctx.resultsList.tabSelect && ctx.cursor >= 0) select(ctx, event); break; case 27: ctx.input.value = ""; diff --git a/docs/demo/js/autoComplete.js.gz b/docs/demo/js/autoComplete.js.gz index 3640c18..4d33b55 100644 Binary files a/docs/demo/js/autoComplete.js.gz and b/docs/demo/js/autoComplete.js.gz differ diff --git a/docs/demo/js/autoComplete.min.js b/docs/demo/js/autoComplete.min.js index cc5edec..df5e706 100644 --- a/docs/demo/js/autoComplete.min.js +++ b/docs/demo/js/autoComplete.min.js @@ -1 +1 @@ -var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,s=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw s}}}}(n.keys);try{for(f.s();!(l=f.n()).done;)c(l.value)}catch(e){f.e(e)}finally{f.f()}}else c()})),n.filter&&(u=n.filter(u));var c=u.slice(0,s.maxResults);t.feedback={query:e,matches:u,results:c},f("results",t)},m="aria-expanded",v="aria-activedescendant",y="aria-selected",b=function(e,n){e.feedback.selection=t({index:n},e.feedback.results[n])},g=function(e){e.isOpen||((e.wrapper||e.input).setAttribute(m,!0),e.list.removeAttribute("hidden"),e.isOpen=!0,f("open",e))},w=function(e){e.isOpen&&((e.wrapper||e.input).setAttribute(m,!1),e.input.setAttribute(v,""),e.list.setAttribute("hidden",""),e.isOpen=!1,f("close",e))},O=function(e,t){var n=t.list,r=t.resultItem,o=n.getElementsByTagName(r.tag),s=!!r.selected&&r.selected.split(" ");if(t.isOpen&&o.length){var a,u,c=t.cursor;e>=o.length&&(e=0),e<0&&(e=o.length-1),t.cursor=e,c>-1&&(o[c].removeAttribute(y),s&&(u=o[c].classList).remove.apply(u,i(s))),o[e].setAttribute(y,!0),s&&(a=o[e].classList).add.apply(a,i(s)),t.input.setAttribute(v,o[t.cursor].id),n.scrollTop=o[e].offsetTop-n.clientHeight+o[e].clientHeight+5,t.feedback.cursor=t.cursor,b(t,e),f("navigate",t)}},A=function(e){var t=e.cursor+1;O(t,e)},S=function(e){var t=e.cursor-1;O(t,e)},k=function(e,t,n){(n=n>=0?n:e.cursor)<0||(e.feedback.event=t,b(e,n),f("selection",e),w(e))};function j(e,n){var r=this;return new Promise((function(i,o){var s,a,c,l,f,p,m;return s=e.input,a=e.query,c=e.trigger,l=e.threshold,f=e.resultsList,p=n||((m=s)instanceof HTMLInputElement||m instanceof HTMLTextAreaElement?m.value:m.innerHTML),function(e,t,n){return t?t(e):e.length>=n}(p=a?a(p):p,c,l)?d(e).then((function(n){try{return e.feedback instanceof Error?i():(h(p,e),f&&function(e){var n=e.resultsList,r=e.list,i=e.resultItem,o=e.feedback;o.query;var s=o.matches,a=o.results;if(e.cursor=-1,r.innerHTML="",s.length||n.noResults){var c=document.createDocumentFragment();a.forEach((function(e,n){var r=u(i.tag,t({id:"".concat(i.id,"_").concat(n),role:"option",innerHTML:e.match,inside:c},i.class&&{class:i.class}));i.element&&i.element(r,e)})),r.append(c),n.element&&n.element(r,o),g(e)}else w(e)}(e),v.call(r))}catch(e){return o(e)}}),o):(w(e),v.call(r));function v(){return i()}}))}var L=function(e,t){for(var n in e)for(var r in e[n])t(n,r)},T=function(e){var n=e.events;e.trigger;var r=e.debounce,i=e.resultsList,o=function(e,t){var n;return function(){clearTimeout(n),n=setTimeout((function(){return e()}),t)}}((function(){return j(e)}),r),s=e.events=t({input:t({},n&&n.input)},i&&{list:n?t({},n.list):{}}),a={input:{input:function(){o()},keydown:function(t){!function(e,t){switch(e.keyCode){case 40:case 38:e.preventDefault(),40===e.keyCode?A(t):S(t);break;case 13:t.submit||e.preventDefault(),t.cursor>=0&&k(t,e);break;case 9:t.resultsList.tabSelect&&t.cursor>=0&&(e.preventDefault(),k(t,e));break;case 27:t.input.value="",w(t)}}(t,e)},blur:function(){w(e)}},list:{mousedown:function(e){e.preventDefault()},click:function(t){!function(e,t){var n=t.resultItem.tag.toUpperCase(),r=Array.from(t.list.querySelectorAll(n)),i=e.target.closest(n);if(i&&i.nodeName===n){var o=r.indexOf(i);k(t,e,o)}}(t,e)}}};L(a,(function(e,t){(i||"input"===t)&&(s[e][t]||(s[e][t]=a[e][t]))})),L(s,(function(t,n){e[t].addEventListener(n,s[t][n])}))};function E(e){var n=this;return new Promise((function(r,i){var o,s,a,c,l,p;if(o=e.name,s=e.input,a=e.placeHolder,c=e.resultsList,l=e.data,p={role:"combobox","aria-owns":c.id,"aria-haspopup":!0,"aria-expanded":!1},u(s,t(t({"aria-controls":c.id,"aria-autocomplete":"both"},a&&{placeholder:a}),!e.wrapper&&t({},p))),e.wrapper&&(e.wrapper=u("div",t({around:s,class:o+"_wrapper"},p))),c&&(e.list=u(c.tag,t({dest:["string"==typeof c.destination?document.querySelector(c.destination):c.destination(),c.position],id:c.id,role:"listbox",hidden:"hidden"},c.class&&{class:c.class}))),l.cache)return d(e).then((function(e){try{return h.call(n)}catch(e){return i(e)}}),i);function h(){return T(e),f("init",e),r()}return h.call(n)}))}function x(e){var t=e.prototype;t.init=function(){E(this)},t.start=function(e){j(this,e)},t.unInit=function(){if(this.wrapper){var e=this.wrapper.parentNode;e.insertBefore(this.input,this.wrapper),e.removeChild(this.wrapper)}var t;L((t=this).events,(function(e,n){t[e].removeEventListener(n,t.events[e][n])}))},t.open=function(){g(this)},t.close=function(){w(this)},t.goTo=function(e){O(e,this)},t.next=function(){A(this)},t.previous=function(){S(this)},t.select=function(e){k(this,null,e)},e.search=t.search=function(e,t,n){p(e,t,n)}}return function e(t){this.options=t,this.id=e.instances=(e.instances||0)+1,this.name="autoComplete",this.wrapper=1,this.threshold=1,this.debounce=0,this.resultsList={position:"afterend",tag:"ul",maxResults:5},this.resultItem={tag:"li"},function(e){var t=e.id,r=e.name,i=e.options,o=e.resultsList,s=e.resultItem;for(var a in i)if("object"===n(i[a]))for(var u in e[a]||(e[a]={}),i[a])e[a][u]=i[a][u];else e[a]=i[a];e.selector=e.selector||"#"+r,o.destination=o.destination||e.selector,o.id=o.id||r+"_list_"+t,s.id=s.id||r+"_result",e.input="string"==typeof e.selector?document.querySelector(e.selector):e.selector()}(this),x.call(this,e),E(this)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).autoComplete=t(); +var e,t;e=this,t=function(){"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var n=1;ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,a=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,s=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw s}}}}(n.keys);try{for(f.s();!(l=f.n()).done;)c(l.value)}catch(e){f.e(e)}finally{f.f()}}else c()})),n.filter&&(u=n.filter(u));var c=u.slice(0,s.maxResults);t.feedback={query:e,matches:u,results:c},f("results",t)},m="aria-expanded",v="aria-activedescendant",y="aria-selected",b=function(e,n){e.feedback.selection=t({index:n},e.feedback.results[n])},g=function(e){e.isOpen||((e.wrapper||e.input).setAttribute(m,!0),e.list.removeAttribute("hidden"),e.isOpen=!0,f("open",e))},w=function(e){e.isOpen&&((e.wrapper||e.input).setAttribute(m,!1),e.input.setAttribute(v,""),e.list.setAttribute("hidden",""),e.isOpen=!1,f("close",e))},O=function(e,t){var n=t.list,r=t.resultItem,o=n.getElementsByTagName(r.tag),s=!!r.selected&&r.selected.split(" ");if(t.isOpen&&o.length){var a,u,c=t.cursor;e>=o.length&&(e=0),e<0&&(e=o.length-1),t.cursor=e,c>-1&&(o[c].removeAttribute(y),s&&(u=o[c].classList).remove.apply(u,i(s))),o[e].setAttribute(y,!0),s&&(a=o[e].classList).add.apply(a,i(s)),t.input.setAttribute(v,o[t.cursor].id),n.scrollTop=o[e].offsetTop-n.clientHeight+o[e].clientHeight+5,t.feedback.cursor=t.cursor,b(t,e),f("navigate",t)}},A=function(e){var t=e.cursor+1;O(t,e)},S=function(e){var t=e.cursor-1;O(t,e)},k=function(e,t,n){(n=n>=0?n:e.cursor)<0||(e.feedback.event=t,b(e,n),f("selection",e),w(e))};function j(e,n){var r=this;return new Promise((function(i,o){var s,a,c,l,f,p,m;return s=e.input,a=e.query,c=e.trigger,l=e.threshold,f=e.resultsList,p=n||((m=s)instanceof HTMLInputElement||m instanceof HTMLTextAreaElement?m.value:m.innerHTML),function(e,t,n){return t?t(e):e.length>=n}(p=a?a(p):p,c,l)?d(e).then((function(n){try{return e.feedback instanceof Error?i():(h(p,e),f&&function(e){var n=e.resultsList,r=e.list,i=e.resultItem,o=e.feedback;o.query;var s=o.matches,a=o.results;if(e.cursor=-1,r.innerHTML="",s.length||n.noResults){var c=document.createDocumentFragment();a.forEach((function(e,n){var r=u(i.tag,t({id:"".concat(i.id,"_").concat(n),role:"option",innerHTML:e.match,inside:c},i.class&&{class:i.class}));i.element&&i.element(r,e)})),r.append(c),n.element&&n.element(r,o),g(e)}else w(e)}(e),v.call(r))}catch(e){return o(e)}}),o):(w(e),v.call(r));function v(){return i()}}))}var L=function(e,t){for(var n in e)for(var r in e[n])t(n,r)},T=function(e){var n=e.events;e.trigger;var r=e.debounce,i=e.resultsList,o=function(e,t){var n;return function(){clearTimeout(n),n=setTimeout((function(){return e()}),t)}}((function(){return j(e)}),r),s=e.events=t({input:t({},n&&n.input)},i&&{list:n?t({},n.list):{}}),a={input:{input:function(){o()},keydown:function(t){!function(e,t){switch(e.keyCode){case 40:case 38:e.preventDefault(),40===e.keyCode?A(t):S(t);break;case 13:t.submit||e.preventDefault(),t.cursor>=0&&k(t,e);break;case 9:t.resultsList.tabSelect&&t.cursor>=0&&k(t,e);break;case 27:t.input.value="",w(t)}}(t,e)},blur:function(){w(e)}},list:{mousedown:function(e){e.preventDefault()},click:function(t){!function(e,t){var n=t.resultItem.tag.toUpperCase(),r=Array.from(t.list.querySelectorAll(n)),i=e.target.closest(n);if(i&&i.nodeName===n){var o=r.indexOf(i);k(t,e,o)}}(t,e)}}};L(a,(function(e,t){(i||"input"===t)&&(s[e][t]||(s[e][t]=a[e][t]))})),L(s,(function(t,n){e[t].addEventListener(n,s[t][n])}))};function E(e){var n=this;return new Promise((function(r,i){var o,s,a,c,l,p;if(o=e.name,s=e.input,a=e.placeHolder,c=e.resultsList,l=e.data,p={role:"combobox","aria-owns":c.id,"aria-haspopup":!0,"aria-expanded":!1},u(s,t(t({"aria-controls":c.id,"aria-autocomplete":"both"},a&&{placeholder:a}),!e.wrapper&&t({},p))),e.wrapper&&(e.wrapper=u("div",t({around:s,class:o+"_wrapper"},p))),c&&(e.list=u(c.tag,t({dest:["string"==typeof c.destination?document.querySelector(c.destination):c.destination(),c.position],id:c.id,role:"listbox",hidden:"hidden"},c.class&&{class:c.class}))),l.cache)return d(e).then((function(e){try{return h.call(n)}catch(e){return i(e)}}),i);function h(){return T(e),f("init",e),r()}return h.call(n)}))}function x(e){var t=e.prototype;t.init=function(){E(this)},t.start=function(e){j(this,e)},t.unInit=function(){if(this.wrapper){var e=this.wrapper.parentNode;e.insertBefore(this.input,this.wrapper),e.removeChild(this.wrapper)}var t;L((t=this).events,(function(e,n){t[e].removeEventListener(n,t.events[e][n])}))},t.open=function(){g(this)},t.close=function(){w(this)},t.goTo=function(e){O(e,this)},t.next=function(){A(this)},t.previous=function(){S(this)},t.select=function(e){k(this,null,e)},e.search=t.search=function(e,t,n){p(e,t,n)}}return function e(t){this.options=t,this.id=e.instances=(e.instances||0)+1,this.name="autoComplete",this.wrapper=1,this.threshold=1,this.debounce=0,this.resultsList={position:"afterend",tag:"ul",maxResults:5},this.resultItem={tag:"li"},function(e){var t=e.id,r=e.name,i=e.options,o=e.resultsList,s=e.resultItem;for(var a in i)if("object"===n(i[a]))for(var u in e[a]||(e[a]={}),i[a])e[a][u]=i[a][u];else e[a]=i[a];e.selector=e.selector||"#"+r,o.destination=o.destination||e.selector,o.id=o.id||r+"_list_"+t,s.id=s.id||r+"_result",e.input="string"==typeof e.selector?document.querySelector(e.selector):e.selector()}(this),x.call(this,e),E(this)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).autoComplete=t(); diff --git a/docs/demo/js/autoComplete.min.js.gz b/docs/demo/js/autoComplete.min.js.gz index 0d94ffc..1dca7f4 100644 Binary files a/docs/demo/js/autoComplete.min.js.gz and b/docs/demo/js/autoComplete.min.js.gz differ diff --git a/docs/demo/js/index.js b/docs/demo/js/index.js index efbd7d3..ad9ddf0 100644 --- a/docs/demo/js/index.js +++ b/docs/demo/js/index.js @@ -32,7 +32,7 @@ const autoCompleteJS = new autoComplete({ resultsList: { element: (list, data) => { const info = document.createElement("p"); - if (data.results.length > 0) { + if (data.results.length) { info.innerHTML = `Displaying ${data.results.length} out of ${data.matches.length} results`; } else { info.innerHTML = `Found ${data.matches.length} matching results for "${data.query}"`; diff --git a/docs/how-to-guides.md b/docs/how-to-guides.md index daa4b32..6f0e412 100644 --- a/docs/how-to-guides.md +++ b/docs/how-to-guides.md @@ -44,13 +44,15 @@ events: { // autoComplete.js Config Options resultsList: { element: (list, query) => { - // Create "No Results" message list element - const message = document.createElement("div"); - message.setAttribute("class", "no_result"); - // Add message text content - message.innerHTML = `Found No Results for "${query}"`; - // Add message list element to the list - list.appendChild(message); + if (!data.results.length) { + // Create "No Results" message list element + const message = document.createElement("div"); + message.setAttribute("class", "no_result"); + // Add message text content + message.innerHTML = `Found No Results for "${query}"`; + // Add message list element to the list + list.appendChild(message); + } }, noResults: true, } diff --git a/docs/index.html b/docs/index.html index 56df251..4d51e60 100644 --- a/docs/index.html +++ b/docs/index.html @@ -158,7 +158,7 @@ src="//platform-api.sharethis.com/js/sharethis.js#property=5c213660c276020011d38212&product=inline-share-buttons" async="async"> + href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.1/dist/css/autoComplete.min.css"> @@ -209,7 +209,7 @@ mustache: { data: ["../package.json", { minVersion: "10.2", - version: "10.2.0" + version: "10.2.1" }] } } @@ -224,7 +224,7 @@ - + \ No newline at end of file diff --git a/docs/release-notes.md b/docs/release-notes.md index 1e84342..23d8d14 100644 --- a/docs/release-notes.md +++ b/docs/release-notes.md @@ -35,7 +35,11 @@ For more information on semantic versioning, please visit . *** -### v10.2.0 โœจ +### v10.2.1 โœจ +- ๐Ÿงน Removed: `preventDefault` on `Tab` key press event +- ๐ŸŽ›๏ธ Updated: `No Results Found` example under `How-to Guides` in documentation + +### v10.2.0 - โž• Added: `submit` API property controls `Enter` button default behavior (Thanks ๐Ÿ‘ @CodeWithOz) #249 #224 #189 - โž• Added: `query` parameter to the `start("query")` API method for programmatic operations - ๐Ÿ”ง Fixed: Generated errors when `resultsList` is disabled due to the attachment of the `keydown` event diff --git a/docs/sitemap.xml b/docs/sitemap.xml index 7a53676..3e18ccf 100644 --- a/docs/sitemap.xml +++ b/docs/sitemap.xml @@ -2,54 +2,54 @@ https://tarekraafat.github.io/autoComplete.js/ - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/getting-started - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/installation - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/usage - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/configuration - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/playground - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/styles - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/plugins - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/browsers-support - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/how-to-guides - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/support - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/release-notes - 2021-05-29 + 2021-07-04 https://tarekraafat.github.io/autoComplete.js/#/contributions - 2021-05-29 + 2021-07-04 \ No newline at end of file diff --git a/package.json b/package.json index 72359aa..95509c3 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "10.2.0", + "version": "10.2.1", "name": "@tarekraafat/autocomplete.js", "description": "Simple autocomplete pure vanilla Javascript library.", "keywords": [ diff --git a/src/controllers/listController.js b/src/controllers/listController.js index e0da3e5..bc48442 100644 --- a/src/controllers/listController.js +++ b/src/controllers/listController.js @@ -240,7 +240,6 @@ const navigate = function (event, ctx) { case 40: case 38: event.preventDefault(); - // Move cursor based on pressed key event.keyCode === 40 ? next(ctx) : previous(ctx); @@ -248,18 +247,14 @@ const navigate = function (event, ctx) { // Enter case 13: if (!ctx.submit) event.preventDefault(); - // If cursor moved if (ctx.cursor >= 0) select(ctx, event); break; // Tab case 9: - if (ctx.resultsList.tabSelect && ctx.cursor >= 0) { - event.preventDefault(); - - select(ctx, event); - } + // Select on Tab if enabled + if (ctx.resultsList.tabSelect && ctx.cursor >= 0) select(ctx, event); break; // Esc