Automatisch zugewiesener Text.2

Ich möchte 2 Textfelder erstellen, im einen soll der User Wörter eingeben können, im anderen größeren kann er dazu einen Text schreiben. Soweit so einfach. Jetzt möchte ich jedoch, dass wenn der User ein bestimmtes Wort aus einer Liste eingibt und dieses Wort nach Eingabe eines Kommas oder durch verlassen des Textfeldes erkannt wird, dass große Textfeld automatisch mit dem dazugehörigen Text befüllt wird. Beispiel: Ich habe eine Einkaufsliste mit Äpfeln, Birnen und Bananen und Anmerkungen von Mutti: "Äpfel" oder "Birnen" - "Nehme bitte Bio Produkte" "Banane" - "Nehme die Krummen" Gebe ich nun "Äpfel" in mein kleines Textfeld ein, erscheint " Nehme bitte Bio Produkte" automatisch im großen. Selbes wenn ich "Birnen" eingebe. Gebe ich aber z.B. "Kirschen" ein, erscheint nichts im Großen und ich kann die Anmerkung selbst erstellen. Wichtig ist, dass das große Textfeld erst automatisch befüllt wird nachdem ich ein Komma gesetzt habe oder das Feld verlassen habe. Und falls dies nicht zu kompliziert ist: Wenn ich z.B. "Nudeln, Äpfel" eingebe, dass dann trotzdem die Anmerkung zu Äpfeln kommt und die Nudeln vernachlässigt werden. Wenn ich "Äpfel, Bananen" eingebe, sollte die erstgenannte Anmerkung kommen.

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> body{ background:#154321; margin:0; padding:0; } h3{ font-size:20px; color:white; text-shadow:2px 2px 2px black; } #wra{ display:flex; } #ipu{ display:flex; flex-direction:column; border:10px solid white; width:100%; height:1000px; padding:20px; } .box{ display:flex; flex-direction:column; flex:1; text-align:center; } textarea{ margin-left:10%; width:80%; height:200px; border:10px solid #aaaa32; border-radius:25px; padding:10px; font-size:20px; box-shadow:5px 5px 5px black; } #ausgabe{ width:100%; margin-top:15px; } #ausgabe .line{ margin-left:15px; width:calc(100% - 15px); color:white; font-size:20px; } #ausgabe .line .start{ width:150px; color:white; font-size:20px; display:inline-block; } #ausgabe .line > .auss{ width:calc(100% - 150px); color:white; font-size:20px; } hr{ margin-bottom:15px; border:1px solid white; display:block; } </style> <div id="ipu"> <div id="wra"> <div class="box"> <h3>Schreibe einen Text hier rein</h3> <textarea id="rein">

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!