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

Question

Я занимаюсь созданием простой 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>

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

Мои мысли об этом

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

Интересно, сможет ли кто-нибудь рассказать мне о моих идеях и о том, как я могу это сделать? Спасибо!

Вот ближайшая финальная версия. Спасибо Эрику за помощь.

Вот что я сделал, чтобы получить его там, где я хотел. Спасибо за помощь, Эрик.

<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>

Answer 1

Попробуйте это: http://jsbin.com/okigi/3/edit (правка: изменил тег формы на div, чтобы пример нигде не смещался)

function process() {

    entered = $('#content').val();
    lines = entered.split(/\n/);
    opttext = ""; for(var i in lines) {
      opttext += "<option>" + lines[i] + "</option>";
    }
    $('#myform').append("<select>"+opttext+"</select>");
}

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

<FORM id="myform" action="" method="">
     <p><LABEL for="content">Paste Code Here: </LABEL></p>
     <p><textarea id="content" cols="40" rows="10"></textarea></p>
     <button id="process">Go!</button>
</FORM>

Это не удаляет дубликаты и не помещает их в алфавитном порядке, но как только у вас есть строки в массиве "линии", вы можете сами выяснить, как это сделать.