From 2048241f94269b4d4279cc5b84ea3f2c57bd65e5 Mon Sep 17 00:00:00 2001
From: Dan Wild <danwild@y7mail.com>
Date: Wed, 7 Mar 2018 11:28:22 +1100
Subject: [PATCH 1/2] Add optional params parentElementId and invertScroll to
 support inverted display

---
 auto-complete.js | 21 +++++++++++++++------
 demo.html        | 16 +++++++++++++++-
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/auto-complete.js b/auto-complete.js
index 2f5a88c..bbeb574 100644
--- a/auto-complete.js
+++ b/auto-complete.js
@@ -37,6 +37,8 @@ var autoComplete = (function(){
             offsetTop: 1,
             cache: 1,
             menuClass: '',
+	        invertScroll: false,
+	        parentElementId: 'body',
             renderItem: function (item, search){
                 // escape special characters
                 search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
@@ -52,9 +54,10 @@ var autoComplete = (function(){
         for (var i=0; i<elems.length; i++) {
             var that = elems[i];
 
-            // create suggestions container "sc"
-            that.sc = document.createElement('div');
-            that.sc.className = 'autocomplete-suggestions '+o.menuClass;
+	        // create container and suggestions div "sc"
+	        var container = document.getElementById(o.parentElementId);
+	        that.sc = document.createElement('div');
+	        that.sc.className = 'autocomplete-suggestions '+o.menuClass;
 
             that.autocompleteAttr = that.getAttribute('autocomplete');
             that.setAttribute('autocomplete', 'off');
@@ -71,7 +74,12 @@ var autoComplete = (function(){
                     if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); }
                     if (!that.sc.suggestionHeight) that.sc.suggestionHeight = that.sc.querySelector('.autocomplete-suggestion').offsetHeight;
                     if (that.sc.suggestionHeight)
-                        if (!next) that.sc.scrollTop = 0;
+	                    if (!next && !o.invertScroll) that.sc.scrollTop = 0;
+	                    else if(o.invertScroll){
+		                    if(that.sc.scrollHeight > that.sc.maxHeight){
+			                    that.sc.scrollTop = that.sc.scrollHeight;
+		                    }
+	                    }
                         else {
                             var scrTop = that.sc.scrollTop, selTop = next.getBoundingClientRect().top - that.sc.getBoundingClientRect().top;
                             if (selTop + that.sc.suggestionHeight - that.sc.maxHeight > 0)
@@ -80,9 +88,10 @@ var autoComplete = (function(){
                                 that.sc.scrollTop = selTop + scrTop;
                         }
                 }
-            }
+            };
+
             addEvent(window, 'resize', that.updateSC);
-            document.body.appendChild(that.sc);
+	        container.appendChild(that.sc);
 
             live('autocomplete-suggestion', 'mouseleave', function(e){
                 var sel = that.sc.querySelector('.autocomplete-suggestion.selected');
diff --git a/demo.html b/demo.html
index ab7b1a2..7b118de 100644
--- a/demo.html
+++ b/demo.html
@@ -111,7 +111,21 @@ <h3>Settings</h3>
             <tr><td>offsetLeft</td><td><i>0</i></td><td>Optional left offset of the suggestions container.</td></tr>
             <tr><td>offsetTop</td><td><i>1</i></td><td>Optional top offset of the suggestions container.</td></tr>
             <tr><td>cache</td><td><i>true</i></td><td>Determines if performed searches should be cached.</td></tr>
-            <tr>
+			<tr>
+				<td>invertScroll</td><td><i>false</i></td>
+				<td>If true, ensures suggestions at the bottom of the list are scrolled into view first.
+					<br/>Why? If your input element is in the footer, you may need to display suggestions <em>above</em> the
+					input - with best suggestions at the bottom of the list instead of the top.<br/>
+					Note that the default css does not support inverted autocomplete (you need to define this yourself).
+				</td>
+			</tr>
+			<tr>
+				<td>parentElementId</td><td><i>'body'</i></td>
+				<td>Custom container div to append autocomplete suggestions.
+					<br>Example: <span class="inline-code">{ parentElementId: 'my-container' }</span>
+				</td>
+			</tr>
+			<tr>
                 <td>menuClass</td><td><i>''</i></td>
                 <td>Custom class/es that get/s added to the dropdown menu container.
                 <br>Example: <span class="inline-code">{ menuClass: 'class1 class2' }</span></td>

From 88b9e2e40a2d547d605197f540083e6d4559fc8a Mon Sep 17 00:00:00 2001
From: Dan Wild <danwild@y7mail.com>
Date: Wed, 7 Mar 2018 11:43:01 +1100
Subject: [PATCH 2/2] Update min.js version

---
 auto-complete.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auto-complete.min.js b/auto-complete.min.js
index 2d0f037..8e0a004 100644
--- a/auto-complete.min.js
+++ b/auto-complete.min.js
@@ -1,3 +1,3 @@
 // JavaScript autoComplete v1.0.4
 // https://github.com/Pixabay/JavaScript-autoComplete
-var autoComplete=function(){function e(e){function t(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function o(e,t,o){e.attachEvent?e.attachEvent("on"+t,o):e.addEventListener(t,o)}function s(e,t,o){e.detachEvent?e.detachEvent("on"+t,o):e.removeEventListener(t,o)}function n(e,s,n,l){o(l||document,s,function(o){for(var s,l=o.target||o.srcElement;l&&!(s=t(l,e));)l=l.parentElement;s&&n.call(l,o)})}if(document.querySelector){var l={selector:0,source:0,minChars:3,delay:150,offsetLeft:0,offsetTop:1,cache:1,menuClass:"",renderItem:function(e,t){t=t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");var o=new RegExp("("+t.split(" ").join("|")+")","gi");return'<div class="autocomplete-suggestion" data-val="'+e+'">'+e.replace(o,"<b>$1</b>")+"</div>"},onSelect:function(){}};for(var c in e)e.hasOwnProperty(c)&&(l[c]=e[c]);for(var a="object"==typeof l.selector?[l.selector]:document.querySelectorAll(l.selector),u=0;u<a.length;u++){var i=a[u];i.sc=document.createElement("div"),i.sc.className="autocomplete-suggestions "+l.menuClass,i.autocompleteAttr=i.getAttribute("autocomplete"),i.setAttribute("autocomplete","off"),i.cache={},i.last_val="",i.updateSC=function(e,t){var o=i.getBoundingClientRect();if(i.sc.style.left=Math.round(o.left+(window.pageXOffset||document.documentElement.scrollLeft)+l.offsetLeft)+"px",i.sc.style.top=Math.round(o.bottom+(window.pageYOffset||document.documentElement.scrollTop)+l.offsetTop)+"px",i.sc.style.width=Math.round(o.right-o.left)+"px",!e&&(i.sc.style.display="block",i.sc.maxHeight||(i.sc.maxHeight=parseInt((window.getComputedStyle?getComputedStyle(i.sc,null):i.sc.currentStyle).maxHeight)),i.sc.suggestionHeight||(i.sc.suggestionHeight=i.sc.querySelector(".autocomplete-suggestion").offsetHeight),i.sc.suggestionHeight))if(t){var s=i.sc.scrollTop,n=t.getBoundingClientRect().top-i.sc.getBoundingClientRect().top;n+i.sc.suggestionHeight-i.sc.maxHeight>0?i.sc.scrollTop=n+i.sc.suggestionHeight+s-i.sc.maxHeight:0>n&&(i.sc.scrollTop=n+s)}else i.sc.scrollTop=0},o(window,"resize",i.updateSC),document.body.appendChild(i.sc),n("autocomplete-suggestion","mouseleave",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&setTimeout(function(){e.className=e.className.replace("selected","")},20)},i.sc),n("autocomplete-suggestion","mouseover",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&(e.className=e.className.replace("selected","")),this.className+=" selected"},i.sc),n("autocomplete-suggestion","mousedown",function(e){if(t(this,"autocomplete-suggestion")){var o=this.getAttribute("data-val");i.value=o,l.onSelect(e,o,this),i.sc.style.display="none"}},i.sc),i.blurHandler=function(){try{var e=document.querySelector(".autocomplete-suggestions:hover")}catch(t){var e=0}e?i!==document.activeElement&&setTimeout(function(){i.focus()},20):(i.last_val=i.value,i.sc.style.display="none",setTimeout(function(){i.sc.style.display="none"},350))},o(i,"blur",i.blurHandler);var r=function(e){var t=i.value;if(i.cache[t]=e,e.length&&t.length>=l.minChars){for(var o="",s=0;s<e.length;s++)o+=l.renderItem(e[s],t);i.sc.innerHTML=o,i.updateSC(0)}else i.sc.style.display="none"};i.keydownHandler=function(e){var t=window.event?e.keyCode:e.which;if((40==t||38==t)&&i.sc.innerHTML){var o,s=i.sc.querySelector(".autocomplete-suggestion.selected");return s?(o=40==t?s.nextSibling:s.previousSibling,o?(s.className=s.className.replace("selected",""),o.className+=" selected",i.value=o.getAttribute("data-val")):(s.className=s.className.replace("selected",""),i.value=i.last_val,o=0)):(o=40==t?i.sc.querySelector(".autocomplete-suggestion"):i.sc.childNodes[i.sc.childNodes.length-1],o.className+=" selected",i.value=o.getAttribute("data-val")),i.updateSC(0,o),!1}if(27==t)i.value=i.last_val,i.sc.style.display="none";else if(13==t||9==t){var s=i.sc.querySelector(".autocomplete-suggestion.selected");s&&"none"!=i.sc.style.display&&(l.onSelect(e,s.getAttribute("data-val"),s),setTimeout(function(){i.sc.style.display="none"},20))}},o(i,"keydown",i.keydownHandler),i.keyupHandler=function(e){var t=window.event?e.keyCode:e.which;if(!t||(35>t||t>40)&&13!=t&&27!=t){var o=i.value;if(o.length>=l.minChars){if(o!=i.last_val){if(i.last_val=o,clearTimeout(i.timer),l.cache){if(o in i.cache)return void r(i.cache[o]);for(var s=1;s<o.length-l.minChars;s++){var n=o.slice(0,o.length-s);if(n in i.cache&&!i.cache[n].length)return void r([])}}i.timer=setTimeout(function(){l.source(o,r)},l.delay)}}else i.last_val=o,i.sc.style.display="none"}},o(i,"keyup",i.keyupHandler),i.focusHandler=function(e){i.last_val="\n",i.keyupHandler(e)},l.minChars||o(i,"focus",i.focusHandler)}this.destroy=function(){for(var e=0;e<a.length;e++){var t=a[e];s(window,"resize",t.updateSC),s(t,"blur",t.blurHandler),s(t,"focus",t.focusHandler),s(t,"keydown",t.keydownHandler),s(t,"keyup",t.keyupHandler),t.autocompleteAttr?t.setAttribute("autocomplete",t.autocompleteAttr):t.removeAttribute("autocomplete"),document.body.removeChild(t.sc),t=null}}}}return e}();!function(){"function"==typeof define&&define.amd?define("autoComplete",function(){return autoComplete}):"undefined"!=typeof module&&module.exports?module.exports=autoComplete:window.autoComplete=autoComplete}();
\ No newline at end of file
+var autoComplete=function(){return function(e){if(document.querySelector){var t={selector:0,source:0,minChars:3,delay:150,offsetLeft:0,offsetTop:1,cache:1,menuClass:"",invertScroll:!1,parentElementId:"body",renderItem:function(e,t){t=t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");var o=new RegExp("("+t.split(" ").join("|")+")","gi");return'<div class="autocomplete-suggestion" data-val="'+e+'">'+e.replace(o,"<b>$1</b>")+"</div>"},onSelect:function(e,t,o){}};for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o]);for(var s="object"==typeof t.selector?[t.selector]:document.querySelectorAll(t.selector),l=0;l<s.length;l++){var n=s[l],c=document.getElementById(t.parentElementId);n.sc=document.createElement("div"),n.sc.className="autocomplete-suggestions "+t.menuClass,n.autocompleteAttr=n.getAttribute("autocomplete"),n.setAttribute("autocomplete","off"),n.cache={},n.last_val="",n.updateSC=function(e,o){var s=n.getBoundingClientRect();if(n.sc.style.left=Math.round(s.left+(window.pageXOffset||document.documentElement.scrollLeft)+t.offsetLeft)+"px",n.sc.style.top=Math.round(s.bottom+(window.pageYOffset||document.documentElement.scrollTop)+t.offsetTop)+"px",n.sc.style.width=Math.round(s.right-s.left)+"px",!e&&(n.sc.style.display="block",n.sc.maxHeight||(n.sc.maxHeight=parseInt((window.getComputedStyle?getComputedStyle(n.sc,null):n.sc.currentStyle).maxHeight)),n.sc.suggestionHeight||(n.sc.suggestionHeight=n.sc.querySelector(".autocomplete-suggestion").offsetHeight),n.sc.suggestionHeight))if(o||t.invertScroll)if(t.invertScroll)n.sc.scrollHeight>n.sc.maxHeight&&(n.sc.scrollTop=n.sc.scrollHeight);else{var l=n.sc.scrollTop,c=o.getBoundingClientRect().top-n.sc.getBoundingClientRect().top;c+n.sc.suggestionHeight-n.sc.maxHeight>0?n.sc.scrollTop=c+n.sc.suggestionHeight+l-n.sc.maxHeight:c<0&&(n.sc.scrollTop=c+l)}else n.sc.scrollTop=0},i(window,"resize",n.updateSC),c.appendChild(n.sc),d("autocomplete-suggestion","mouseleave",function(e){var t=n.sc.querySelector(".autocomplete-suggestion.selected");t&&setTimeout(function(){t.className=t.className.replace("selected","")},20)},n.sc),d("autocomplete-suggestion","mouseover",function(e){var t=n.sc.querySelector(".autocomplete-suggestion.selected");t&&(t.className=t.className.replace("selected","")),this.className+=" selected"},n.sc),d("autocomplete-suggestion","mousedown",function(e){if(u(this,"autocomplete-suggestion")){var o=this.getAttribute("data-val");n.value=o,t.onSelect(e,o,this),n.sc.style.display="none"}},n.sc),n.blurHandler=function(){try{var e=document.querySelector(".autocomplete-suggestions:hover")}catch(t){e=0}e?n!==document.activeElement&&setTimeout(function(){n.focus()},20):(n.last_val=n.value,n.sc.style.display="none",setTimeout(function(){n.sc.style.display="none"},350))},i(n,"blur",n.blurHandler);var a=function(e){var o=n.value;if(n.cache[o]=e,e.length&&o.length>=t.minChars){for(var s="",l=0;l<e.length;l++)s+=t.renderItem(e[l],o);n.sc.innerHTML=s,n.updateSC(0)}else n.sc.style.display="none"};n.keydownHandler=function(e){var o,s=window.event?e.keyCode:e.which;if((40==s||38==s)&&n.sc.innerHTML)return(l=n.sc.querySelector(".autocomplete-suggestion.selected"))?(o=40==s?l.nextSibling:l.previousSibling)?(l.className=l.className.replace("selected",""),o.className+=" selected",n.value=o.getAttribute("data-val")):(l.className=l.className.replace("selected",""),n.value=n.last_val,o=0):((o=40==s?n.sc.querySelector(".autocomplete-suggestion"):n.sc.childNodes[n.sc.childNodes.length-1]).className+=" selected",n.value=o.getAttribute("data-val")),n.updateSC(0,o),!1;if(27==s)n.value=n.last_val,n.sc.style.display="none";else if(13==s||9==s){var l;(l=n.sc.querySelector(".autocomplete-suggestion.selected"))&&"none"!=n.sc.style.display&&(t.onSelect(e,l.getAttribute("data-val"),l),setTimeout(function(){n.sc.style.display="none"},20))}},i(n,"keydown",n.keydownHandler),n.keyupHandler=function(e){var o=window.event?e.keyCode:e.which;if(!o||(o<35||o>40)&&13!=o&&27!=o){var s=n.value;if(s.length>=t.minChars){if(s!=n.last_val){if(n.last_val=s,clearTimeout(n.timer),t.cache){if(s in n.cache)return void a(n.cache[s]);for(var l=1;l<s.length-t.minChars;l++){var c=s.slice(0,s.length-l);if(c in n.cache&&!n.cache[c].length)return void a([])}}n.timer=setTimeout(function(){t.source(s,a)},t.delay)}}else n.last_val=s,n.sc.style.display="none"}},i(n,"keyup",n.keyupHandler),n.focusHandler=function(e){n.last_val="\n",n.keyupHandler(e)},t.minChars||i(n,"focus",n.focusHandler)}this.destroy=function(){for(var e=0;e<s.length;e++){var t=s[e];r(window,"resize",t.updateSC),r(t,"blur",t.blurHandler),r(t,"focus",t.focusHandler),r(t,"keydown",t.keydownHandler),r(t,"keyup",t.keyupHandler),t.autocompleteAttr?t.setAttribute("autocomplete",t.autocompleteAttr):t.removeAttribute("autocomplete"),document.body.removeChild(t.sc),t=null}}}function u(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function i(e,t,o){e.attachEvent?e.attachEvent("on"+t,o):e.addEventListener(t,o)}function r(e,t,o){e.detachEvent?e.detachEvent("on"+t,o):e.removeEventListener(t,o)}function d(e,t,o,s){i(s||document,t,function(t){for(var s,l=t.target||t.srcElement;l&&!(s=u(l,e));)l=l.parentElement;s&&o.call(l,t)})}}}();"function"==typeof define&&define.amd?define("autoComplete",function(){return autoComplete}):"undefined"!=typeof module&&module.exports?module.exports=autoComplete:window.autoComplete=autoComplete;
\ No newline at end of file