From b48290ccfa1b4c06d5492d7353777a672ecdd0bb Mon Sep 17 00:00:00 2001 From: Kirk Bater Date: Mon, 25 Jul 2016 16:46:48 -0400 Subject: [PATCH 1/2] Added ability to choose where the results should show up --- auto-complete.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/auto-complete.js b/auto-complete.js index 2f5a88c..1957be1 100644 --- a/auto-complete.js +++ b/auto-complete.js @@ -37,6 +37,7 @@ var autoComplete = (function(){ offsetTop: 1, cache: 1, menuClass: '', + container: 'body', renderItem: function (item, search){ // escape special characters search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); @@ -82,7 +83,7 @@ var autoComplete = (function(){ } } addEvent(window, 'resize', that.updateSC); - document.body.appendChild(that.sc); + document.querySelector(o.container).appendChild(that.sc); live('autocomplete-suggestion', 'mouseleave', function(e){ var sel = that.sc.querySelector('.autocomplete-suggestion.selected'); From 6872a460e56a2a99ee77cc8fdfe6dcd51fe2cd3c Mon Sep 17 00:00:00 2001 From: Kirk Bater Date: Mon, 25 Jul 2016 17:09:31 -0400 Subject: [PATCH 2/2] Added the ability to put results in a custom container. --- auto-complete.js | 16 ++++++++++++---- demo.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 4 deletions(-) diff --git a/auto-complete.js b/auto-complete.js index 1957be1..181e9fe 100644 --- a/auto-complete.js +++ b/auto-complete.js @@ -57,16 +57,24 @@ var autoComplete = (function(){ that.sc = document.createElement('div'); that.sc.className = 'autocomplete-suggestions '+o.menuClass; + // If adding into a results container, remove the position absolute css styles + if (o.container !== "body") { + that.sc.className = that.sc.className + ' autocomplete-suggestions--in-container'; + } + that.autocompleteAttr = that.getAttribute('autocomplete'); that.setAttribute('autocomplete', 'off'); that.cache = {}; that.last_val = ''; that.updateSC = function(resize, next){ - var rect = that.getBoundingClientRect(); - that.sc.style.left = Math.round(rect.left + (window.pageXOffset || document.documentElement.scrollLeft) + o.offsetLeft) + 'px'; - that.sc.style.top = Math.round(rect.bottom + (window.pageYOffset || document.documentElement.scrollTop) + o.offsetTop) + 'px'; - that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth + if (o.container === 'body') { + // If the container is not the body, do not absolutely position in the window. + var rect = that.getBoundingClientRect(); + that.sc.style.left = Math.round(rect.left + (window.pageXOffset || document.documentElement.scrollLeft) + o.offsetLeft) + 'px'; + that.sc.style.top = Math.round(rect.bottom + (window.pageYOffset || document.documentElement.scrollTop) + o.offsetTop) + 'px'; + that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth + } if (!resize) { that.sc.style.display = 'block'; if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); } diff --git a/demo.html b/demo.html index ab7b1a2..28b8f2d 100644 --- a/demo.html +++ b/demo.html @@ -239,6 +239,40 @@

Advanced suggestions handling and custom layout

However, when choosing an item, the onSelect() callback returns all required information.

+ +

Customizing the Display Container

+

Sometimes you don't want the container to be just placed at the end of the body tag, and it would make more sense for your use case to have it display in a different location. + To do something like that, you would just have to scaffold out an empty block container (div, section, etc) for results, and then pass a class or ID attached to that container into + the options when you initalize autocomplete:

+ + +
+ +
+ +
+ + 
var demo3 = new autoComplete({
+            selector: '#container-demo',
+            minChars: 1,
+            container: '.results-container',
+            source: function(term, suggest){
+                term = term.toLowerCase();
+                var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
+                var suggestions = [];
+                for (i=0;i<choices.length;i++)
+                    if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
+                suggest(suggestions);
+            }
+        });
+ + 
<form onsubmit="return false;" class="pure-form" style="margin:30px 0 40px">
+            <input id="container-demo" autofocus type="text" name="q" placeholder="See the results ..." style="width:100%;max-width:600px;outline:0">
+        </form>
+
+        <div class="results-container"></div>
+ +
@@ -301,6 +335,20 @@

Advanced suggestions handling and custom layout

} }); + var demo3 = new autoComplete({ + selector: '#container-demo', + minChars: 1, + container: '.results-container', + source: function(term, suggest){ + term = term.toLowerCase(); + var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML']; + var suggestions = []; + for (i=0;i