From de114e61610889b82bb69fe3e362b55f589cd154 Mon Sep 17 00:00:00 2001 From: Samar Rizvi Date: Thu, 10 Aug 2017 19:22:51 +0530 Subject: [PATCH 1/5] And overlay attribute Add overlay attribute to auto-complete directive so that if inside a container (like, for example, table) the suggestion list is outside the container and not inside. Also keep the auto-complete height to 0 as it gives unnecessary scroll when inside a container. --- src/auto-complete.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/auto-complete.js b/src/auto-complete.js index 02774e7c..e79efa4d 100644 --- a/src/auto-complete.js +++ b/src/auto-complete.js @@ -25,6 +25,8 @@ * gains focus. The current input value is available as $query. * @param {boolean=} [selectFirstMatch=true] Flag indicating that the first match will be automatically selected once * the suggestion list is shown. + * @param {boolean=} [overlay=false] Flag indicating whether suggession list should overlay the primary container + * (like, for example, a table) or should be inside it * @param {expression=} [matchClass=NA] Expression to evaluate for each match in order to get the CSS classes to be used. * The expression is provided with the current match as $match, its index as $index and its state as $selected. The result * of the evaluation must be one of the values supported by the ngClass directive (either a string, an array or an object). @@ -60,6 +62,10 @@ export default function AutocompleteDirective($document, $timeout, $sce, $q, tag }; self.show = () => { + if(options.overlay) { + self.overlay = true; + self.width = element.closest('tags-input').width(); + } if (options.selectFirstMatch) { self.select(0); } @@ -157,6 +163,7 @@ export default function AutocompleteDirective($document, $timeout, $sce, $q, tag loadOnEmpty: [Boolean, false], loadOnFocus: [Boolean, false], selectFirstMatch: [Boolean, true], + overlay: [Boolean, false], displayProperty: [String, ''] }); @@ -179,6 +186,11 @@ export default function AutocompleteDirective($document, $timeout, $sce, $q, tag let events = scope.events; options.tagsInput = tagsInput.getOptions(); + + //Keep height of auto-complete container zero as it gives un-necessary scroll when inside an element like, for example, table. + element.css({ + height:0 + }); let shouldLoadSuggestions = value => value && value.length >= options.minLength || !value && options.loadOnEmpty; From 799235ca7c2704b2e31c3cf63eb248f238d1d6d9 Mon Sep 17 00:00:00 2001 From: Samar Rizvi Date: Thu, 10 Aug 2017 19:35:15 +0530 Subject: [PATCH 2/5] Styling for overlay attribute Add necessary styling for overlay attribute. --- templates/auto-complete.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/auto-complete.html b/templates/auto-complete.html index 22ce2c3d..25eda230 100644 --- a/templates/auto-complete.html +++ b/templates/auto-complete.html @@ -1,4 +1,4 @@ -
+
-
\ No newline at end of file +
From a66a547288c8c6e2bef64e22fa16e3a44d810c9b Mon Sep 17 00:00:00 2001 From: Samar Rizvi Date: Fri, 11 Aug 2017 12:51:44 +0530 Subject: [PATCH 3/5] Make ng-style less complex. Make ng-style less complex. Using function call instead. --- templates/auto-complete.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/auto-complete.html b/templates/auto-complete.html index 25eda230..1e67bfae 100644 --- a/templates/auto-complete.html +++ b/templates/auto-complete.html @@ -1,4 +1,4 @@ -
+
  • Date: Fri, 11 Aug 2017 12:56:43 +0530 Subject: [PATCH 4/5] Create overlayStyle object Create overlayStyle object to use in ng-style in template --- src/auto-complete.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/auto-complete.js b/src/auto-complete.js index e79efa4d..39cdd43a 100644 --- a/src/auto-complete.js +++ b/src/auto-complete.js @@ -65,6 +65,10 @@ export default function AutocompleteDirective($document, $timeout, $sce, $q, tag if(options.overlay) { self.overlay = true; self.width = element.closest('tags-input').width(); + self.overlayStyle = { + position: 'fixed', + width: self.width + } } if (options.selectFirstMatch) { self.select(0); From 916c3711d58d29b69860f472c7a586794ed34c64 Mon Sep 17 00:00:00 2001 From: Samar Rizvi Date: Fri, 11 Aug 2017 12:59:38 +0530 Subject: [PATCH 5/5] Style suggestion-list for overlay Use overlayStyle object for ng-style that is set in auto-complete directive when overlay attribute is true. --- templates/auto-complete.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/auto-complete.html b/templates/auto-complete.html index 1e67bfae..944863ae 100644 --- a/templates/auto-complete.html +++ b/templates/auto-complete.html @@ -1,4 +1,4 @@ -
    +