テキストエリアの各行をオートコンプリートするにはどうすればよいですか？

Question

私は、成分の配列を持っている：

var ingredients = ["Apple", "Orange", "Banana"]; 

テキストエリア内の各ラインは、成分にオートコンプリートなるように、私はそれを作るだろうか。

たとえば、最初の行に「Ap」と入力すると、リンゴが表示されます。次の行で、「Or」と入力すると、オレンジ色が表示されます。

ご協力いただきありがとうございます。

Answer 1

これはあなたが探しているものですか？

https://jsfiddle.net/pLmr3uxz/

var keysPressed = 0; 
 
    var preventLineBreak = false; 
 
    var match = ""; 
 
    var ingredients = ["Apple", "Orange", "Banana"]; 
 
    $('textarea').keydown(function (e) { 
 
     if (e.keyCode == 13 && this.selectionStart != this.selectionEnd) { 
 
      $('textarea')[0].selectionStart = $('textarea')[0].selectionEnd; 
 
      if (preventLineBreak == true) { 
 
       e.preventDefault(); 
 
       preventLineBreak = false; 
 
      } 
 
     } 
 
     keysPressed++; 
 
    }); 
 
    $('textarea').keyup(function (e) { 
 
     keysPressed--; 
 
     if(keysPressed == 0){ 
 
      var position = $('textarea')[0].selectionStart; 
 
      if (!(/[a-zA-Z0-9-_ ]/.test(String.fromCharCode(e.keyCode)))) { return false; } 
 
      var haveMatch = false; 
 
      var textValue = $('textarea').val(); 
 
      var searchValueStart = textValue.slice(0, position).lastIndexOf('\n') + 1; 
 
      var beforeSearchValue = textValue.slice(0, searchValueStart); 
 
      var afterSearchValue = textValue.slice(position, textValue.length); 
 
      var searchvalue = textValue.slice(searchValueStart, position); 
 
      ingredients.forEach(function (value) { 
 
       if (!haveMatch && searchvalue && value.slice(0, searchvalue.length).toLowerCase() == searchvalue.toLowerCase()) { 
 
        match = value; 
 
        haveMatch = true; 
 
      } 
 
      }); 
 
      if (match) { 
 
       $('textarea').val(beforeSearchValue + match + afterSearchValue); 
 
       $('textarea')[0].selectionStart = beforeSearchValue.length + searchvalue.length; 
 
       $('textarea')[0].selectionEnd = beforeSearchValue.length + match.length; 
 
       match = ""; 
 
       preventLineBreak = true; 
 
      } 
 
     } 
 
    });

<textarea></textarea> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>