From fdf53e6461d713217998f95e6867ec826b4ada5d Mon Sep 17 00:00:00 2001
From: keith <trueinviso@gmail.com>
Date: Sun, 16 Aug 2015 12:49:02 -0700
Subject: [PATCH] feat(typeahead): add `appendElementToId`

- Add appending popup to specific id

Closes #4231
Closes #4497
---
 src/typeahead/docs/readme.md         |  3 +++
 src/typeahead/test/typeahead.spec.js | 10 ++++++++++
 src/typeahead/typeahead.js           |  6 +++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md
index 3e8d1cf3a3..6f48c7d74c 100644
--- a/src/typeahead/docs/readme.md
+++ b/src/typeahead/docs/readme.md
@@ -24,6 +24,9 @@ The typeahead directives provide several attributes:
 * `typeahead-append-to-body` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: false)_ : Should the typeahead popup be appended to $body instead of the parent element?
 
+* `typeahead-append-to-element-id`
+   _(Defaults: false)_ : Should the typeahead popup be appended to an element id instead of the parent element?
+
 * `typeahead-editable` <i class="glyphicon glyphicon-eye-open"></i>
    _(Defaults: true)_ :
    Should it restrict model values to the ones selected from the popup only ?
diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js
index 67c3c54fc3..50fa8777a1 100644
--- a/src/typeahead/test/typeahead.spec.js
+++ b/src/typeahead/test/typeahead.spec.js
@@ -859,6 +859,16 @@ describe('typeahead tests', function() {
     });
   });
 
+  describe('append to element id', function() {
+    it('append typeahead results to element', function() {
+      $document.find('body').append('<div id="myElement"></div>');
+      var element = prepareInputEl('<div><input name="input" ng-model="result" typeahead="item for item in states | filter:$viewValue" typeahead-append-to-element-id="myElement"></div>');
+      changeInputValueTo(element, 'al');
+      expect($document.find('#myElement')).toBeOpenWithActive(2, 0);
+      $document.find('#myElement').remove();
+    });
+  });
+
   describe('append to body', function() {
     it('append typeahead results to body', function() {
       var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true"></div>');
diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
index de9d1e731e..c7d6390d71 100644
--- a/src/typeahead/typeahead.js
+++ b/src/typeahead/typeahead.js
@@ -68,6 +68,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
         var appendToBody =  attrs.typeaheadAppendToBody ? originalScope.$eval(attrs.typeaheadAppendToBody) : false;
 
+        var appendToElementId =  attrs.typeaheadAppendToElementId || false;
+
         var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;
 
         //If input matches an item of the list exactly, select it automatically
@@ -420,7 +422,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
         originalScope.$on('$destroy', function() {
           $document.unbind('click', dismissClickHandler);
-          if (appendToBody) {
+          if (appendToBody || appendToElementId) {
             $popup.remove();
           }
           // Prevent jQuery cache memory leak
@@ -431,6 +433,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
 
         if (appendToBody) {
           $document.find('body').append($popup);
+        } else if (appendToElementId !== false) {
+          angular.element($document[0].getElementById(appendToElementId)).append($popup);
         } else {
           element.after($popup);
         }