jQuery.textcomplete placement issue

A demo of the position:top option causing odd placement of menu

by jarosciak

HTML

<textarea id="myTextArea1" placeholder="placement auto - Enter a fruit" cols="20" rows="5"></textarea>

CSS

.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: #999;
}

/* SHOULD not modify */

.dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu a:hover {
    cursor: pointer;
}

JavaScript

// Had to paste the jQuery.textcompelete code here since I don't have a 
// public location to pull it from.
//
// Scroll down to the bottom to see my additional code

// ----- BEGINNING OF jQuery.textcomplete code ---------------------------------------
/*!
 * jQuery.textcomplete
 *
 * Repository: https://github.com/yuku-t/jquery-textcomplete
 * License:    MIT (https://github.com/yuku-t/jquery-textcomplete/blob/master/LICENSE)
 * Author:     Yuku Takahashi
 */

if (typeof jQuery === 'undefined') {
  throw new Error('jQuery.textcomplete requires jQuery');
}

+function ($) {
  'use strict';

  var warn = function (message) {
    if (console.warn) { console.warn(message); }
  };

  $.fn.textcomplete = function (strategies, option) {
    var args = Array.prototype.slice.call(arguments);
    return this.each(function () {
      var $this = $(this);
      var completer = $this.data('textComplete');
      if (!completer) {
        completer = new $.fn.textcomplete.Completer(this, option || {});
        $this.data('textComplete', completer);
      }
      if (typeof strategies === 'string') {
        if (!completer) return;
        args.shift()
        completer[strategies].apply(completer, args);
      } else {
        // For backward compatibility.
        // TODO: Remove at v0.4
        $.each(strategies, function (obj) {
          $.each(['header', 'footer', 'placement', 'maxCount'], function (name) {
            if (obj[name]) {
              completer.option[name] = obj[name];
              warn(name + 'as a strategy param is deplicated. Use option.');
              delete obj[name];
            }
          });
        });
        completer.register($.fn.textcomplete.Strategy.parse(strategies));
      }
    });
  };

}(jQuery);

+function ($) {
  'use strict';

  // Exclusive execution control utility.
  //
  // func - The function to be locked. It is executed with a function named
  //        `free` as the first argument. Once it is called, additional
  //      ...