jQuery разделил значение текстового поля на строки

То, что я делаю, создает простую страницу HTML, в которой существует текстовое поле. Пользователь отправляет некоторый вход на то текстовое поле такой как

first last
first last
first last
first last

Предположите, что это различные имена. То, что я хотел бы сделать, является взятием вход в текстовом поле, и отобразите его на экран с повторяющимися вынутыми именами, в алфавитном порядке, и с тегами опций, добавленными вокруг них.

Что я имею

 <div id="contentdisplay"></div>
<FORM action="" method="">
     <p><LABEL for="content">Paste Code Here: </LABEL></p>
     <p><textarea id="content" cols="80" rows="40"></textarea></p>
    </FORM>



 <script type="text/javascript">
  $(document).ready(function() { 
    $('#content').change(function() {
        var test = $('#content').val();
        $("#contentdisplay").html(test);
    });     
   });
  </script>

Прямо сейчас это принимает значение от текстового поля, когда пользовательские щелчки за пределами него и плюются им на экран в "contentdisplay" отделении. Я застреваю на части, где я разделил тот ввод данных пользователем на строки. Я попробовал test.split ('/n') и засунул его в переменную, но это не удалось.

Мои мысли о движении об этом

• В то время как цикличное выполнение, Разделение форма, введенная символом новой строки, поместило каждую строку в массив
• Отсортируйте массив в алфавитный порядок. (Удалите любые пустые строки или пробелы прежде и после строк во время этой части.)
• Я не уверен в удалении удваивания. В Java я использовал набор, который автоматически только позволил одной из каждой записи входить.
• Используя .html jQuery () цикл через массив для дисплея и добавляют теги вокруг

Удивление, если кто-либо может просветить меня на моих идеях и как я мог пойти об этом.Спасибо!

Вот близкая окончательная версия. Благодаря Erik для его справки.

Вот то, что я сделал для получения его, где я хотел. Спасибо за справку Erik.

<script type="text/javascript">
function process() {

entered = $('#content').val();
lines = entered.split(/\n/); 
opttext = ""; 


lines = jQuery.unique(lines);
lines.sort();

for(var i in lines) {
  opttext += "<option>" + lines[i] + "</option>";
}

$('#contentdisplay').html("<select>"+opttext+"</select>");
}

$(document).ready(function() {
    $("#content").bind('change', process);
});

</script>

<div id="contentdisplay"></div>

<FORM id="myform" action="" method="">
     <p><LABEL for="content">Paste Code Here and click anywhere on the screen: </LABEL></p>
     <p><textarea id="content" cols="40" rows="10"></textarea></p>
</FORM>