Wie würde ich jede Zeile in einem Textfeld automatisch vervollständigen?

Question

Ich habe eine Reihe von Zutaten:

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

Wie würde ich es so machen, dass jede Zeile in einem Textfeld zu einem Bestandteil automatisch vervollständigt würde.

Zum Beispiel, wenn ich "Ap" in der ersten Zeile eingeben, sollte es Apple vorschlagen. Wenn ich in der nächsten Zeile "Oder" eintippe, sollte Orange angezeigt werden.

Bitte helfen, und danke im Voraus.

Answer 1

Ist das wonach Sie suchen?

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>