Input Multiple Autocomplete w/ Wikipedia Suggestions

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 id="entirePage">
      
      <h1>
      Wikipedia Suggestions
      </h1>
      
      <div>
      Wikipedia Look Up: <input id="textarea2">
      </div>



        <br><small><b>Quick Help</b></small>
        <div id="topHelp">
          
        </div>


    </div>


  </body>

</html>

CSS

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

#textarea2{
    width: 100%;
    font-family: "Helvetica", Times, serif;
    display: block;
    box-sizing: padding-box;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 0px;
    font-size: 14px;
    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 availTags;
var word = "";
  // Getter
  var minLength = $(".selector").autocomplete("option", "minLength");

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

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

  }

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

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

  $("#textarea2")
    .on("keydown", function(event) {
    
      if (event.keyCode === 190) {
        $('#textarea2').autocomplete('close');
      } 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) {
        if ((request.term)) {
        if ((request.term).length >= 2) {
        
           $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&search=" + (request.term) + "&limit=15&namespace=0&format=json&callback=?&redirects=resolve", function(json) {
        
        availTags = json[1];
      })
      
        response(availTags, (request.term));
       }
       }
       
      },
      focus: function() {
        return false;
     ...