What I am doing is creating a simple html page in which there is a textbox. A user posts some input to that textbox such as

first last

first last

first last

first last

Imagine these are different names. What I would like to do is take the input in the textbox, and display it to the screen with the repeating names taken out, in alphabetical order, and with option tags added around them.

What I have

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

Right now it takes the value from the textbox when the user clicks outside of it and spits it to the screen inside of the contentdisplay div. I'm stuck on the part where I split that user input into lines. I tried test.split('/n') and stuck it into a variable but that did not work out.

My Thoughts on Going About This

• While looping, Split the form input by newline character, put each line into an array


• Sort the array into alphabetical order. (Remove any empty lines or spaces before and after the lines during this part.)


• I'm not sure about removing the doubles. In Java I used a set which automatically only allowed one of each entry to come in.


• Using jquery's .html() cycle through array for display and add tags around

Wondering if anyone can enlighten me on my ideas and how I could go about this. Thank you!

Here is the near final version. Thanks to Erik for his help.

Here is what I did to get it where I wanted. Thanks for the help 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>