TextArea Multiple Autocomplete w/ Wikipedia Suggestions

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Multiple values</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  </head>

  <body>

    
 <div id="entirePage">
      
      <h1>
      Wikipedia Suggestions
      </h1>
      
       <b>Enter Text!</b>
    <small>(start typing first characters of any word). <br>Use TAB/ENTER and ↑↓ arrows to utilize the real-time suggestions</small>
      
      <textarea id="tags" class='autoExpand' rows='3' data-min-rows='3'></textarea>



        <br><small><b>Quick Help</b></small>
        <div id="quickHelp">
            Additional Info 1<br>
            Additional Info 2<br>
            Additional Info 3<br>
            Additional Info 4<br>
            Additional Info 5<br>
        </div>


    </div>


  </body>

</html>

CSS

div#entirePage{
    width: 500px;
    position: relative;
    max-width: 500px;
    margin: 0px auto;
    font-family: "Helvetica", Times, serif;
}

textarea{
    width: 500px;
    font-family: "Helvetica", Times, serif;
    display: block;
    box-sizing: padding-box;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 10px;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 2px 2px #ebebeb;
    border: 2px solid #cccccc;
    background-color: #fffcd0;
    resize: none;
}


#quickHelp {
  box-shadow: 2px 2px #ebebeb;
    border: 2px solid #cccccc;
}

JavaScript

// Overrides the default autocomplete filter function to
// search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
  var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
  
  if (array) {
  return $.grep(array, function (value) {
    return matcher.test(value.label || value.value || value);
  });
  }
  
};

$(function() {
var availableTags;
var word = "";
  // Getter
  var minLength = $(".selector").autocomplete("option", "minLength");

  // Setter
  $(".selector").autocomplete("option", "minLength", 3);

  function split(val) {
    // return val.split(/\s/mgi);
    return val.split(/ \s*/);

  }

  function extractLast(term) {
    /*
    
    var n = term.split(" ");
    var word = n[n.length - 1];
    
    */
    word = split(term).pop();

    if (word.length <= 2) {
      n = term.split(".");
      word = n[n.length - 1];
      word = "-----";
       $('#tags').autocomplete('close');
    } else if (word.length >= 3) {

      if (word.includes(".") === true) {
      word = word.replace(/\r?\n|\r/,"");
          word = word.substring(word.indexOf(".") + 1);
      }

     // $("label[for='helper']").text(word + " ==> " + word.length + " ==>" + word.indexOf("."));
      return word;

    }




  }

  $("#tags")
    // don't navigate away from the field on tab when selecting an item
    .on("keydown", function(event) {
    
    
      if (event.keyCode === 190) {
      console.log("pressed dot");
        $('#tags').autocomplete('close');
      
      //break;
      } else {
      
        if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
        event.preventDefault();
      }
      
      }
    
    
    
    
    })
    .autocomplete({
    	delay: 50,
      minLength: 1,
      multiline: true,
      autoFocus: true,
      source: function(request, response) {
        // delegate back to autocomplete, but extract the last term
        
                    
      ...