rework autocomplete: update jquery.textcomplete to v1.3.3

js/autocomplete.js

@@ -194,7 +194,7 @@ function string2bb(element) {
 		};
 
 		this.attr('autocomplete','off');
-		this.textcomplete([contacts,smilies], {className:'acpopup', zIndex:1020});
+		this.textcomplete([contacts,smilies], {className:'acpopup', zIndex:10000});
 	};
 })( jQuery );
 
@@ -221,7 +221,7 @@ function string2bb(element) {
 			template: contact_format,
 		};
 		this.attr('autocomplete', 'off');
-		var a = this.textcomplete([contacts, community], {className:'acpopup', maxCount:100, zIndex: 1020, appendTo:'#nav-search-box'});
+		var a = this.textcomplete([contacts, community], {className:'acpopup', maxCount:100, zIndex: 10000, appendTo:'nav'});
 		a.on('textComplete:select', function(e, value, strategy) { submit_form(this); });
 	};
 })( jQuery );
@@ -241,7 +241,7 @@ function string2bb(element) {
 		};
 
 		this.attr('autocomplete','off');
-		var a = this.textcomplete([contacts], {className:'acpopup', zIndex:1020});
+		var a = this.textcomplete([contacts], {className:'acpopup', zIndex:10000});
 
 		if(autosubmit)
 			a.on('textComplete:select', function(e,value,strategy) { submit_form(this); });
@@ -267,7 +267,7 @@ function string2bb(element) {
 		};
 
 		this.attr('autocomplete','off');
-		var a = this.textcomplete([names], {className:'acpopup', zIndex:1020});
+		var a = this.textcomplete([names], {className:'acpopup', zIndex:10000});
 
 		if(autosubmit)
 			a.on('textComplete:select', function(e,value,strategy) { submit_form(this); });
@@ -315,7 +315,7 @@ function string2bb(element) {
 		};
 
 		this.attr('autocomplete','off');
-		var a = this.textcomplete([bbco], {className:'acpopup', zIndex:1020});
+		var a = this.textcomplete([bbco], {className:'acpopup', zIndex:10000});
 
 		a.on('textComplete:select', function(e, value, strategy) { value; });
 

library/jquery-textcomplete/CHANGELOG.md

@@ -0,0 +1,335 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+This project adheres to [Semantic Versioning](http://semver.org/) by version 1.0.0.
+
+This change log adheres to [keepachangelog.com](http://keepachangelog.com).
+
+## [Unreleased]
+
+## [1.3.3] - 2016-04-04
+### Fixed
+- Fix uncaught TypeError.
+
+## [1.3.2] - 2016-03-27
+### Fixed
+- Fix dropdown position problem with `line-height: normal`.
+
+## [1.3.1] - 2016-03-23
+### Fixed
+- Fix `input[type=search]` support.
+
+## [1.3.0] - 2016-03-20
+### Added
+- Add optional "id" strategy parameter.
+
+## [1.2.2] - 2016-03-19
+### Fixed
+- Remove dropdown element after `textcomplete('destroy')`.
+- Skip search after pressing tab.
+- Fix dropdown-menu positioning problem using textarea-caret package.
+
+## [1.2.1] - 2016-03-14
+### Fixed
+- Build dist files.
+
+## [1.2.0] - 2016-03-14
+### Added
+- Support `input[type=search]` ([#236](https://github.com/yuku-t/jquery-textcomplete/pull/236))
+
+## [1.1.0] - 2016-03-10
+### Added
+- Add the ability to insert HTML into a "contenteditable" field. ([#217](https://github.com/yuku-t/jquery-textcomplete/pull/217))
+
+### Fixed
+- Position relative to appendTo element. ([#234](https://github.com/yuku-t/jquery-textcomplete/pull/234))
+- Avoid dropdown bumping into right edge of window. ([#235](https://github.com/yuku-t/jquery-textcomplete/pull/235))
+- Fix top position issue when window is scrolled up and parents has fix position. ([#229](https://github.com/yuku-t/jquery-textcomplete/pull/229))
+
+## [1.0.0] - 2016-02-29
+### Changed
+- Adheres keepachangelog.com.
+
+## [0.8.2] - 2016-02-29
+### Added
+- Add deactivate method to Completer. ([#233](https://github.com/yuku-t/jquery-textcomplete/pull/233))
+
+## [0.8.1] - 2015-10-22
+### Added
+- Add condition to ignore skipUnchangedTerm for empty text. ([#210](https://github.com/yuku-t/jquery-textcomplete/pull/210))
+
+## [0.8.0] - 2015-08-31
+### Changed
+- If undefined is returned from a replace callback dont replace the text. ([#204](https://github.com/yuku-t/jquery-textcomplete/pull/204))
+
+## [0.7.3] - 2015-08-27
+### Added
+- Add `Strategy#el` and `Strategy#$el` which returns current input/textarea element and corresponding jquery object respectively.
+
+## [0.7.2] - 2015-08-26
+### Fixed
+- Reset \_term after selected ([#170](https://github.com/yuku-t/jquery-textcomplete/pull/170))
+
+## [0.7.1] - 2015-08-19
+### Changed
+- Remove RTL support because of some bugs.
+
+## [0.7.0] - 2015-07-02
+### Add
+- Add support for a "no results" message like the header/footer. ([#179](https://github.com/yuku-t/jquery-textcomplete/pull/179))
+- Yield the search term to the template function. ([#177](https://github.com/yuku-t/jquery-textcomplete/pull/177))
+- Add amd wrapper. ([#167](https://github.com/yuku-t/jquery-textcomplete/pull/167))
+- Add touch devices support. ([#163](https://github.com/yuku-t/jquery-textcomplete/pull/163))
+
+### Changed
+- Stop sharing a dropdown element.
+
+## [0.6.1] - 2015-06-30
+### Fixed
+- Fix bug that Dropdown.\_fitToBottom does not consider window scroll
+
+## [0.6.0] - 2015-06-30
+### Added
+- Now dropdown elements have "textcomplete-dropdown" class.
+
+## [0.5.2] - 2015-06-29
+### Fixed
+- Keep dropdown list in browser window. ([#172](https://github.com/yuku-t/jquery-textcomplete/pull/172))
+
+## [0.5.1] - 2015-06-08
+### Changed
+- Now a replace function is invoked with a user event.
+
+## [0.5.0] - 2015-06-08
+### Added
+- Support `onKeydown` option.
+
+## [0.4.0] - 2015-03-10
+### Added
+- Publish to [npmjs](https://www.npmjs.com/package/jquery-textcomplete).
+- Support giving a function which returns a regexp to `match` option for dynamic matching.
+
+## [0.3.9] - 2015-03-03
+### Fixed
+- Deactivate dropdown on escape. ([#155](https://github.com/yuku-t/jquery-textcomplete/pull/155))
+
+## [0.3.8] - 2015-02-26
+### Fixed
+- Fix completion with enter key. ([#154](https://github.com/yuku-t/jquery-textcomplete/pull/154))
+- Fix empty span node is inserted. ([#153](https://github.com/yuku-t/jquery-textcomplete/pull/153))
+
+## [0.3.7] - 2015-01-21
+### Added
+- Support input([type=text]. [#149](https://github.com/yuku-t/jquery-textcomplete/pull/149))
+
+## [0.3.6] - 2014-12-11
+### Added
+- Support element.contentEditable compatibility check. ([#147](https://github.com/yuku-t/jquery-textcomplete/pull/147))
+
+### Fixed
+- Fixes the fire function for events with additional parameters. ([#145](https://github.com/yuku-t/jquery-textcomplete/pull/145))
+
+## [0.3.5] - 2014-12-11
+### Added
+- Adds functionality to complete selection on space key. ([#141](https://github.com/yuku-t/jquery-textcomplete/pull/141))
+
+### Fixed
+- Loading script in head and destroy method bugfixes. ([#143](https://github.com/yuku-t/jquery-textcomplete/pull/143))
+
+## [0.3.4] - 2014-12-03
+### Fixed
+- Fix error when destroy is called before the field is focused. ([#138](https://github.com/yuku-t/jquery-textcomplete/pull/138))
+- Fix IE bug where it would only trigger when tha carrot was at the end of the line. ([#133](https://github.com/yuku-t/jquery-textcomplete/pull/133))
+
+## [0.3.3] - 2014-09-25
+### Added
+- Add `className` option.
+- Add `match` as the third argument of a search function.
+
+### Fixed
+- Ignore `.textcomplete('destory')` on non-initialized elements. ([#118](https://github.com/yuku-t/jquery-textcomplete/pull/118))
+- Trigger completer with the current text by default. ([#119](https://github.com/yuku-t/jquery-textcomplete/pull/119))
+- Hide dropdown before destroying it. ([#120](https://github.com/yuku-t/jquery-textcomplete/pull/120))
+- Don't throw an exception even if a jquery click event is manually triggered. ([#121](https://github.com/yuku-t/jquery-textcomplete/pull/121))
+
+## [0.3.2] - 2014-09-16
+### Added
+- Add `IETextarea` adapter which supports IE8
+- Add `idProperty` option.
+- Add `adapter` option.
+
+### Changed
+- Rename `Input` as `Adapter`.
+
+## [0.3.1] - 2014-09-10
+### Added
+- Add `context` strategy option.
+- Add `debounce` option.
+
+### Changed
+- Recycle `.dropdown-menu` element if available.
+
+## [0.3.0] - 2014-09-10
+### Added
+- Consider the `tab-size` of textarea.
+- Add `zIndex` option.
+
+### Fixed
+- Revive `header` and `footer` options.
+- Revive `height` option.
+
+## [0.3.0-beta2] - 2014-09-09
+### Fixed
+- Make sure that all demos work fine.
+
+## [0.3.0-beta1] - 2014-08-31
+### Fixed
+- Huge refactoring.
+
+## [0.2.6] - 2014-08-16
+### Fixed
+- Repair contenteditable.
+
+## [0.2.5] - 2014-08-07
+### Added
+- Enhance contenteditable support. ([#98](https://github.com/yuku-t/jquery-textcomplete/pull/98))
+- Support absolute left/right placement. ([#96](https://github.com/yuku-t/jquery-textcomplete/pull/96))
+- Support absolute height, scrollbar, pageup and pagedown. ([#87](https://github.com/yuku-t/jquery-textcomplete/pull/87))
+
+## [0.2.4] - 2014-07-02
+### Fixed
+- Fix horizonal position on contentEditable elements. ([#92](https://github.com/yuku-t/jquery-textcomplete/pull/92))
+
+## [0.2.3] - 2014-06-24
+### Added
+- Option to supply list view position function. ([#88](https://github.com/yuku-t/jquery-textcomplete/pull/88))
+
+## [0.2.2] - 2014-06-08
+### Added
+- Append dropdown element to body element by default.
+- Tiny refactoring. [#84]
+- Ignore tab key when modifier keys are being pushed. ([#85](https://github.com/yuku-t/jquery-textcomplete/pull/85))
+- Manual triggering.
+
+## [0.2.1] - 2014-05-15
+### Added
+- Support `appendTo` option.
+- `header` and `footer` supports a function.
+
+### Changed
+- Remove textcomplate-wrapper element.
+
+## [0.2.0] - 2014-05-02
+### Added
+- Contenteditable support.
+- Several bugfixes.
+- Support `header` and `footer` setting.
+
+## [0.1.4.1] - 2014-04-04
+### Added
+- Support placement option.
+- Emacs-style prev/next keybindings.
+- Replay searchFunc for the last term on slow network env.
+
+### Fixed
+- Several bugfixes.
+
+## [0.1.3] - 2014-04-07
+### Added
+- Support RTL positioning.
+
+### Fixed
+- Several bugfixes.
+
+## [0.1.2] - 2014-02-08
+### Added
+- Enable to append strategies on the fly.
+- Enable to stop autocompleting.
+- Enable to apply multiple textareas at once.
+- Don't show popup on pressing arrow up and down keys.
+- Hide dropdown by pressing ESC key.
+- Prevent showing a dropdown when it just autocompleted.
+
+## [0.1.1] - 2014-02-02
+### Added
+- Introduce `textComplete:show`, `textComplete:hide` and `textComplete:select` events.
+
+## [0.1.0] - 2013-10-28
+### Added
+- Now strategies argument is an Array of strategy objects.
+
+## [0.0.4] - 2013-10-28
+### Added
+- Up and Down arrows cycle instead of exit.
+- Support Zepto.
+- Support jQuery.overlay.
+
+### Fixed
+- Several bugfixes.
+
+## [0.0.3] - 2013-09-11
+### Added
+- Some performance improvement.
+- Implement lazy callbacking on search function.
+
+## [0.0.2] - 2013-09-08
+### Added
+- Support IE8.
+- Some performance improvement.
+- Implement cache option.
+
+## 0.0.1 - 2013-09-02
+### Added
+- Initial release.
+
+[Unreleased]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.3.3...HEAD
+[1.3.3]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.3.2...v1.3.3
+[1.3.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.3.1...v1.3.2
+[1.3.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.3.0...v1.3.1
+[1.3.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.2.2...v1.3.0
+[1.2.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.2.1...v1.2.2
+[1.2.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.2.0...v1.2.1
+[1.2.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.1.0...v1.2.0
+[1.1.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v1.0.0...v1.1.0
+[1.0.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.8.2...v1.0.0
+[0.8.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.8.1...v0.8.2
+[0.8.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.8.0...v0.8.1
+[0.8.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.7.3...v0.8.0
+[0.7.3]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.7.2...v0.7.3
+[0.7.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.7.1...v0.7.2
+[0.7.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.7.0...v0.7.1
+[0.7.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.6.1...v0.7.0
+[0.6.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.6.0...v0.6.1
+[0.6.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.5.2...v0.6.0
+[0.5.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.5.1...v0.5.2
+[0.5.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.5.0...v0.5.1
+[0.5.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.4.0...v0.5.0
+[0.4.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.9...v0.4.0
+[0.3.9]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.8...v0.3.9
+[0.3.8]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.7...v0.3.8
+[0.3.7]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.6...v0.3.7
+[0.3.6]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.5...v0.3.6
+[0.3.5]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.4...v0.3.5
+[0.3.4]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.3...v0.3.4
+[0.3.3]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.2...v0.3.3
+[0.3.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.1...v0.3.2
+[0.3.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.0...v0.3.1
+[0.3.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.0-beta2...v0.3.0
+[0.3.0-beta2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.3.0-beta1...v0.3.0-beta2
+[0.3.0-beta1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.2.6...v0.3.0-beta1
+[0.2.6]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.2.5...v0.2.6
+[0.2.5]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.2.4...v0.2.5
+[0.2.4]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.2.3...v0.2.4
+[0.2.3]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.2.2...v0.2.3
+[0.2.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.2.1...v0.2.2
+[0.2.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.2.0...v0.2.1
+[0.2.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.1.4.1...v0.2.0
+[0.1.4.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.1.3...v0.1.4.1
+[0.1.3]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.1.2...v0.1.3
+[0.1.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.1.1...v0.1.2
+[0.1.1]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.1.0...v0.1.1
+[0.1.0]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.0.4...v0.1.0
+[0.0.4]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.0.3...v0.0.4
+[0.0.3]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.0.2...v0.0.3
+[0.0.2]: https://github.com/yuku-t/jquery-textcomplete/compare/v0.0.1...v0.0.2

library/jquery-textcomplete/README.md

@@ -0,0 +1,54 @@
+Autocomplete for Textarea
+=========================
+
+[![npm version](https://badge.fury.io/js/jquery-textcomplete.svg)](http://badge.fury.io/js/jquery-textcomplete)
+[![Bower version](https://badge.fury.io/bo/jquery-textcomplete.svg)](http://badge.fury.io/bo/jquery-textcomplete)
+[![Analytics](https://ga-beacon.appspot.com/UA-4932407-14/jquery-textcomplete/readme)](https://github.com/igrigorik/ga-beacon)
+
+Introduces autocompleting power to textareas, like a GitHub comment form has.
+
+![Demo](http://yuku-t.com/jquery-textcomplete/media/images/demo.gif)
+
+[Demo](http://yuku-t.com/jquery-textcomplete/).
+
+Synopsis
+--------
+
+```js
+$('textarea').textcomplete([{
+    match: /(^|\b)(\w{2,})$/,
+    search: function (term, callback) {
+        var words = ['google', 'facebook', 'github', 'microsoft', 'yahoo'];
+        callback($.map(words, function (word) {
+            return word.indexOf(term) === 0 ? word : null;
+        }));
+    },
+    replace: function (word) {
+        return word + ' ';
+    }
+}]);
+```
+
+Dependencies
+------------
+
+- jQuery (>= 1.7.0) OR Zepto (>= 1.0)
+
+Documents
+---------
+
+See [doc](https://github.com/yuku-t/jquery-textcomplete/tree/master/doc) dir.
+
+License
+-------
+
+Licensed under the MIT License.
+
+Credits
+-------
+
+### Contributors
+
+Patches and code improvements were contributed by:
+
+https://github.com/yuku-t/jquery-textcomplete/graphs/contributors

library/jquery-textcomplete/jquery.textcomplete.css

@@ -0,0 +1,33 @@
+/* Sample */
+
+.dropdown-menu {
+    border: 1px solid #ddd;
+    background-color: white;
+}
+
+.dropdown-menu li {
+    border-top: 1px solid #ddd;
+    padding: 2px 5px;
+}
+
+.dropdown-menu li:first-child {
+    border-top: none;
+}
+
+.dropdown-menu li:hover,
+.dropdown-menu .active {
+    background-color: rgb(110, 183, 219);
+}
+
+
+/* SHOULD not modify */
+
+.dropdown-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dropdown-menu a:hover {
+    cursor: pointer;
+}

library/jquery-textcomplete/jquery.textcomplete.js

@@ -149,7 +149,7 @@ if (typeof jQuery === 'undefined') {
     this.views      = [];
     this.option     = $.extend({}, Completer._getDefaults(), option);
 
-    if (!this.$el.is('input[type=text]') && !this.$el.is('textarea') && !element.isContentEditable && element.contentEditable != 'true') {
+    if (!this.$el.is('input[type=text]') && !this.$el.is('input[type=search]') && !this.$el.is('textarea') && !element.isContentEditable && element.contentEditable != 'true') {
       throw new Error('textcomplete must be called on a Textarea or a ContentEditable.');
     }
 
@@ -196,7 +196,7 @@ if (typeof jQuery === 'undefined') {
       if (this.option.adapter) {
         Adapter = this.option.adapter;
       } else {
-        if (this.$el.is('textarea') || this.$el.is('input[type=text]')) {
+        if (this.$el.is('textarea') || this.$el.is('input[type=text]') || this.$el.is('input[type=search]')) {
           viewName = typeof element.selectionEnd === 'number' ? 'Textarea' : 'IETextarea';
         } else {
           viewName = 'ContentEditable';
@@ -217,6 +217,12 @@ if (typeof jQuery === 'undefined') {
       this.$el = this.adapter = this.dropdown = null;
     },
 
+    deactivate: function () {
+      if (this.dropdown) {
+        this.dropdown.deactivate();
+      }
+    },
+
     // Invoke textcomplete.
     trigger: function (text, skipUnchangedTerm) {
       if (!this.dropdown) { this.initialize(); }
@@ -225,7 +231,7 @@ if (typeof jQuery === 'undefined') {
       if (searchQuery.length) {
         var term = searchQuery[1];
         // Ignore shift-key, ctrl-key and so on.
-        if (skipUnchangedTerm && this._term === term) { return; }
+        if (skipUnchangedTerm && this._term === term && term !== "") { return; }
         this._term = term;
         this._search.apply(this, searchQuery);
       } else {
@@ -432,6 +438,7 @@ if (typeof jQuery === 'undefined') {
       this.$el.off('.' + this.id);
       this.$inputEl.off('.' + this.id);
       this.clear();
+      this.$el.remove();
       this.$el = this.$inputEl = this.completer = null;
       delete dropdownViews[this.id]
     },
@@ -440,11 +447,18 @@ if (typeof jQuery === 'undefined') {
       var contentsHtml = this._buildContents(zippedData);
       var unzippedData = $.map(this.data, function (d) { return d.value; });
       if (this.data.length) {
+        var strategy = zippedData[0].strategy;
+        if (strategy.id) {
+          this.$el.attr('data-strategy', strategy.id);
+        } else {
+          this.$el.removeAttr('data-strategy');
+        }
         this._renderHeader(unzippedData);
         this._renderFooter(unzippedData);
         if (contentsHtml) {
           this._renderContents(contentsHtml);
           this._fitToBottom();
+          this._fitToRight();
           this._activateIndexedItem();
         }
         this._setScroll();
@@ -456,8 +470,6 @@ if (typeof jQuery === 'undefined') {
     },
 
     setPosition: function (pos) {
-      this.$el.css(this._applyPlacement(pos));
-
       // Make the dropdown fixed if the input is also fixed
       // This can't be done during init, as textcomplete may be used on multiple elements on the same page
       // Because the same dropdown is reused behind the scenes, we need to recheck every time the dropdown is showed
@@ -467,10 +479,13 @@ if (typeof jQuery === 'undefined') {
         if($(this).css('position') === 'absolute') // The element has absolute positioning, so it's all OK
           return false;
         if($(this).css('position') === 'fixed') {
+          pos.top -= $window.scrollTop();
+          pos.left -= $window.scrollLeft();					
           position = 'fixed';
           return false;
         }
       });
+      this.$el.css(this._applyPlacement(pos));
       this.$el.css({ position: position }); // Update positioning
 
       return this;
@@ -774,6 +789,17 @@ if (typeof jQuery === 'undefined') {
       }
     },
 
+    _fitToRight: function() {
+      // We don't know how wide our content is until the browser positions us, and at that point it clips us
+      // to the document width so we don't know if we would have overrun it. As a heuristic to avoid that clipping
+      // (which makes our elements wrap onto the next line and corrupt the next item), if we're close to the right
+      // edge, move left. We don't know how far to move left, so just keep nudging a bit.
+      var tolerance = 30; // pixels. Make wider than vertical scrollbar because we might not be able to use that space.
+      while (this.$el.offset().left + this.$el.width() > $window.width() - tolerance) {
+        this.$el.offset({left: this.$el.offset().left - tolerance});
+      }
+    },
+
     _applyPlacement: function (position) {
       // If the 'placement' option set to 'top', move the position above the element.
       if (this.placement.indexOf('top') !== -1) {
@@ -843,6 +869,7 @@ if (typeof jQuery === 'undefined') {
     search:     null,
 
     // Optional
+    id:         null,
     cache:      false,
     context:    function () { return true; },
     index:      2,
@@ -932,11 +959,19 @@ if (typeof jQuery === 'undefined') {
     },
 
     // Returns the caret's relative coordinates from body's left top corner.
-    //
-    // FIXME: Calculate the left top corner of `this.option.appendTo` element.
     getCaretPosition: function () {
       var position = this._getCaretRelativePosition();
       var offset = this.$el.offset();
+
+      // Calculate the left top corner of `this.option.appendTo` element.
+      var $parent = this.option.appendTo;
+      if ($parent) {
+         if (!($parent instanceof $)) { $parent = $($parent); }
+         var parentOffset = $parent.offsetParent().offset();
+         offset.top -= parentOffset.top;
+         offset.left -= parentOffset.left;
+      }
+
       position.top += offset.top;
       position.left += offset.left;
       return position;
@@ -962,6 +997,7 @@ if (typeof jQuery === 'undefined') {
     // Suppress searching if it returns true.
     _skipSearch: function (clickEvent) {
       switch (clickEvent.keyCode) {
+        case 9:  // TAB
         case 13: // ENTER
         case 40: // DOWN
         case 38: // UP
@@ -989,21 +1025,6 @@ if (typeof jQuery === 'undefined') {
     this.initialize(element, completer, option);
   }
 
-  Textarea.DIV_PROPERTIES = {
-    left: -9999,
-    position: 'absolute',
-    top: 0,
-    whiteSpace: 'pre-wrap'
-  }
-
-  Textarea.COPY_PROPERTIES = [
-    'border-width', 'font-family', 'font-size', 'font-style', 'font-variant',
-    'font-weight', 'height', 'letter-spacing', 'word-spacing', 'line-height',
-    'text-decoration', 'text-align', 'width', 'padding-top', 'padding-right',
-    'padding-bottom', 'padding-left', 'margin-top', 'margin-right',
-    'margin-bottom', 'margin-left', 'border-style', 'box-sizing', 'tab-size'
-  ];
-
   $.extend(Textarea.prototype, $.fn.textcomplete.Adapter.prototype, {
     // Public methods
     // --------------
@@ -1024,56 +1045,38 @@ if (typeof jQuery === 'undefined') {
       }
     },
 
+    getTextFromHeadToCaret: function () {
+      return this.el.value.substring(0, this.el.selectionEnd);
+    },
+
     // Private methods
     // ---------------
 
-    // Returns the caret's relative coordinates from textarea's left top corner.
-    //
-    // Browser native API does not provide the way to know the position of
-    // caret in pixels, so that here we use a kind of hack to accomplish
-    // the aim. First of all it puts a dummy div element and completely copies
-    // the textarea's style to the element, then it inserts the text and a
-    // span element into the textarea.
-    // Consequently, the span element's position is the thing what we want.
     _getCaretRelativePosition: function () {
-      var dummyDiv = $('<div></div>').css(this._copyCss())
+      var p = $.fn.textcomplete.getCaretCoordinates(this.el, this.el.selectionStart);
-        .text(this.getTextFromHeadToCaret());
+      return {
-      var span = $('<span></span>').text('.').appendTo(dummyDiv);
+        top: p.top + this._calculateLineHeight() - this.$el.scrollTop(),
-      this.$el.before(dummyDiv);
+        left: p.left - this.$el.scrollLeft()
-      var position = span.position();
+      };
-      position.top += span.height() - this.$el.scrollTop();
-      position.lineHeight = span.height();
-      dummyDiv.remove();
-      return position;
     },
 
-    _copyCss: function () {
+    _calculateLineHeight: function () {
-      return $.extend({
+      var lineHeight = parseInt(this.$el.css('line-height'), 10);
-        // Set 'scroll' if a scrollbar is being shown; otherwise 'auto'.
+      if (isNaN(lineHeight)) {
-        overflow: this.el.scrollHeight > this.el.offsetHeight ? 'scroll' : 'auto'
+        // http://stackoverflow.com/a/4515470/1297336
-      }, Textarea.DIV_PROPERTIES, this._getStyles());
+        var parentNode = this.el.parentNode;
-    },
+        var temp = document.createElement(this.el.nodeName);
-
+        var style = this.el.style;
-    _getStyles: (function ($) {
+        temp.setAttribute(
-      var color = $('<div></div>').css(['color']).color;
+          'style',
-      if (typeof color !== 'undefined') {
+          'margin:0px;padding:0px;font-family:' + style.fontFamily + ';font-size:' + style.fontSize
-        return function () {
+        );
-          return this.$el.css(Textarea.COPY_PROPERTIES);
+        temp.innerHTML = 'test';
-        };
+        parentNode.appendChild(temp);
-      } else { // jQuery < 1.8
+        lineHeight = temp.clientHeight;
-        return function () {
+        parentNode.removeChild(temp);
-          var $el = this.$el;
-          var styles = {};
-          $.each(Textarea.COPY_PROPERTIES, function (i, property) {
-            styles[property] = $el.css(property);
-          });
-          return styles;
-        };
       }
-    })($),
+      return lineHeight;
-
-    getTextFromHeadToCaret: function () {
-      return this.el.value.substring(0, this.el.selectionEnd);
     }
   });
 
@@ -1168,9 +1171,28 @@ if (typeof jQuery === 'undefined') {
         pre = pre.replace(strategy.match, newSubstr);
         range.selectNodeContents(range.startContainer);
         range.deleteContents();
-        var node = document.createTextNode(pre + post);
+        
-        range.insertNode(node);
+        // create temporary elements
-        range.setStart(node, pre.length);
+        var preWrapper = document.createElement("div");
+        preWrapper.innerHTML = pre;
+        var postWrapper = document.createElement("div");
+        postWrapper.innerHTML = post;
+        
+        // create the fragment thats inserted
+        var fragment = document.createDocumentFragment();
+        var childNode;
+        var lastOfPre;
+        while (childNode = preWrapper.firstChild) {
+        	lastOfPre = fragment.appendChild(childNode);
+        }
+        while (childNode = postWrapper.firstChild) {
+        	fragment.appendChild(childNode);
+        }
+        
+        // insert the fragment & jump behind the last node in "pre"
+        range.insertNode(fragment);
+        range.setStartAfter(lastOfPre);
+        
         range.collapse(true);
         sel.removeAllRanges();
         sel.addRange(range);
@@ -1223,5 +1245,155 @@ if (typeof jQuery === 'undefined') {
   $.fn.textcomplete.ContentEditable = ContentEditable;
 }(jQuery);
 
+// The MIT License (MIT)
+// 
+// Copyright (c) 2015 Jonathan Ong me@jongleberry.com
+// 
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+// associated documentation files (the "Software"), to deal in the Software without restriction,
+// including without limitation the rights to use, copy, modify, merge, publish, distribute,
+// sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// 
+// The above copyright notice and this permission notice shall be included in all copies or
+// substantial portions of the Software.
+// 
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+// NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+// https://github.com/component/textarea-caret-position
+
+(function () {
+
+// The properties that we copy into a mirrored div.
+// Note that some browsers, such as Firefox,
+// do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
+// so we have to do every single property specifically.
+var properties = [
+  'direction',  // RTL support
+  'boxSizing',
+  'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
+  'height',
+  'overflowX',
+  'overflowY',  // copy the scrollbar for IE
+
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+  'borderStyle',
+
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/font
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'fontStretch',
+  'fontSize',
+  'fontSizeAdjust',
+  'lineHeight',
+  'fontFamily',
+
+  'textAlign',
+  'textTransform',
+  'textIndent',
+  'textDecoration',  // might not make a difference, but better be safe
+
+  'letterSpacing',
+  'wordSpacing',
+
+  'tabSize',
+  'MozTabSize'
+
+];
+
+var isBrowser = (typeof window !== 'undefined');
+var isFirefox = (isBrowser && window.mozInnerScreenX != null);
+
+function getCaretCoordinates(element, position, options) {
+  if(!isBrowser) {
+    throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser');
+  }
+
+  var debug = options && options.debug || false;
+  if (debug) {
+    var el = document.querySelector('#input-textarea-caret-position-mirror-div');
+    if ( el ) { el.parentNode.removeChild(el); }
+  }
+
+  // mirrored div
+  var div = document.createElement('div');
+  div.id = 'input-textarea-caret-position-mirror-div';
+  document.body.appendChild(div);
+
+  var style = div.style;
+  var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9
+
+  // default textarea styles
+  style.whiteSpace = 'pre-wrap';
+  if (element.nodeName !== 'INPUT')
+    style.wordWrap = 'break-word';  // only for textarea-s
+
+  // position off-screen
+  style.position = 'absolute';  // required to return coordinates properly
+  if (!debug)
+    style.visibility = 'hidden';  // not 'display: none' because we want rendering
+
+  // transfer the element's properties to the div
+  properties.forEach(function (prop) {
+    style[prop] = computed[prop];
+  });
+
+  if (isFirefox) {
+    // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
+    if (element.scrollHeight > parseInt(computed.height))
+      style.overflowY = 'scroll';
+  } else {
+    style.overflow = 'hidden';  // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
+  }
+
+  div.textContent = element.value.substring(0, position);
+  // the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
+  if (element.nodeName === 'INPUT')
+    div.textContent = div.textContent.replace(/\s/g, '\u00a0');
+
+  var span = document.createElement('span');
+  // Wrapping must be replicated *exactly*, including when a long word gets
+  // onto the next line, with whitespace at the end of the line before (#7).
+  // The  *only* reliable way to do that is to copy the *entire* rest of the
+  // textarea's content into the <span> created at the caret position.
+  // for inputs, just '.' would be enough, but why bother?
+  span.textContent = element.value.substring(position) || '.';  // || because a completely empty faux span doesn't render at all
+  div.appendChild(span);
+
+  var coordinates = {
+    top: span.offsetTop + parseInt(computed['borderTopWidth']),
+    left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
+  };
+
+  if (debug) {
+    span.style.backgroundColor = '#aaa';
+  } else {
+    document.body.removeChild(div);
+  }
+
+  return coordinates;
+}
+
+if (typeof module != 'undefined' && typeof module.exports != 'undefined') {
+  module.exports = getCaretCoordinates;
+} else if(isBrowser){
+  window.$.fn.textcomplete.getCaretCoordinates = getCaretCoordinates;
+}
+
+}());
+
 return jQuery;
 }));