jquery teilt den Textbox-Wert in Zeilen auf

Was ich mache, ist das Erstellen einer einfachen HTML-Seite, in der sich ein Textfeld befindet. Ein Benutzer gibt einige Eingaben in diesem Textfeld wie

Stellen Sie sich vor, das sind verschiedene Namen. Was ich tun möchte, ist, die Eingabe in das Textfeld zu übernehmen und sie auf dem Bildschirm mit den wiederholten Namen in alphabetischer Reihenfolge und mit um sie herum hinzugefügten Optionstags anzuzeigen.

Was ich habe

Im Moment nimmt es den Wert aus dem Textfeld, wenn der Benutzer außerhalb davon klickt und es auf den Bildschirm innerhalb des "Contentdisplay" div spuckt. Ich stecke auf dem Teil, wo ich diese Benutzereingabe in Zeilen aufgeteilt habe. Ich habe test.split ('/ n') versucht und es in eine Variable gesteckt, aber das hat nicht funktioniert.

Meine Gedanken darüber, dies zu tun

• Während des Schleifens, teilen Sie die Formulareingabe mit einem Zeilenumbruchzeichen, und setzen Sie jede Zeile in ein Array
• Sortieren Sie das Array in alphabetischer Reihenfolge. (Entfernen Sie alle leeren Zeilen oder Leerzeichen vor und nach den Zeilen während dieses Teils.)
• Ich bin mir nicht sicher, ob ich die Doubles entfernen soll. In Java habe ich ein Set benutzt, bei dem automatisch nur einer von jedem Eintrag kommen konnte.
• Verwenden von jquery's .html () durchläuft ein Array zur Anzeige und fügt Tags um
hinzu

Ich frage mich, ob mich jemand über meine Ideen aufklären kann und wie ich das machen könnte. Danke!

Hier ist die fast endgültige Version. Danke an Erik für seine Hilfe.

Hier ist, was ich getan habe, um es dahin zu bringen, wo ich es wollte. Danke für die Hilfe Erik.