Leave the textarea autocomplete when it increases in size

Question

I need to make the autocomplete track the textarea when it is augmented.

<form class="form-control form-inline">
     <label for="tags" class="control-label" id="upBody">Component: </label>
     <textarea id="tags" ng-model="components"
         class="search ng-pristine ng-touched ui-widget"
         placeholder="Insert a component" autocomplete="on">
     </textarea>
     <button ng-click="search(components)"
         class="btn btn-primary">See objects
     </button>
</form>

.autocomplete({
    appendTo: "#upBody",
    minLength: 0,
    source: function( request, response ) {
      response( $.ui.autocomplete.filter(
        availableTags, extractLast( request.term ) ) );
    },
    focus: function() {
      return false;
    },
    select: function( event, ui ) {
      var terms = split( this.value );
      terms.pop();
      terms.push( ui.item.value );
      terms.push( "" );
      this.value = terms.join( ", " );
      return false;
    }
  });

.ui-autocomplete {
     position: relative;
     overflow-y: auto;
     overflow-x: hidden;
     max-height: 150px;
 }

Answer 1

You can add a event handler mousemove moving to top/bass the list element according to the size of the textarea, and at the same time adjusting the width:

$("#tags").on("mousemove", function(){
   $("#ui-id-1").css({
      "top": $(this).outerHeight()+$(this).offset().top +"px",
      "width": $(this).outerWidth() +"px"
   });
});

See example:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
$("#tags")
.on( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
.autocomplete({
   appendTo: "#upBody",
    minLength: 0,
    source: function( request, response ) {
      response( $.ui.autocomplete.filter(
        availableTags, extractLast( request.term )) );
    },
    focus: function() {
      return false;
    },
    select: function( event, ui ) {
      var terms = split( this.value );
      terms.pop();
      terms.push( ui.item.value );
      terms.push( "" );
      this.value = terms.join( ", " );
      return false;
    }
  });

function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

$("#tags").on("mousemove", function(){
   $("#ui-id-1").css({
      "top": $(this).outerHeight()+$(this).offset().top +"px",
      "width": $(this).outerWidth() +"px"
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form class="form-control form-inline">
     <label for="tags" class="control-label" id="upBody">Component: </label>
     <textarea id="tags" ng-model="components" class="search ng-pristine ng-touched ui-widget" placeholder="Insert a component" autocomplete="on"></textarea>
     <button ng-click="search(components)"
         class="btn btn-primary">See objects
     </button>
</form>