Question

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>

Answer 1

Try this:
http://jsbin.com/okigi/3/edit
(edit: changed the form tag to a div so the example doesn’t sumbit anywhere)

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>

This doesn’t take out duplicates, or put them in alaphabetical order, but once you have the lines in the array “lines” you can figure out how to do those things on your own.