TextArea Multiple Autocomplete using JSON

by jarosciak

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 class="ui-widget">
      <label for="tags"></label>
      <textarea id="tags" style="color: black;font-size:18px;margin: 0px; width: 600px; height: 200px;"></textarea>
    </div>



  </body>

</html>

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 word = "";
  // Getter
  var minLength = $(".selector").autocomplete("option", "minLength");

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

  var availableTags = [
    "ActionScript",
    "Arnold",
    "Arnold Schwarzenegger",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  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 &&...