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

现在，当用户在文本框外单击时，它会从文本框获取值并将其吐到“contentdisplay”div 内的屏幕上。我被困在将用户输入分成几行的部分。我尝试了 test.split('/n') 并将其插入到一个变量中，但没有成功。

我对此的想法

• 循环时，将输入的表格按换行符拆分，每行放入一个数组
• 按字母顺序排列数组。 (删除这部分中行前后的任何空行或空格。)
• 我不确定是否要删除 double 。在 Java 中，我使用了一个集合，它自动只允许每个条目中的一个进入。
• 使用 jquery 的 .html() 循环显示数组并在周围添加标签

想知道是否有人可以启发我的想法以及我该如何去做。谢谢!

这是接近最终版本的版本。感谢 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

试试这个: 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>

这不会删除重复项，也不会按字母顺序排列它们，但是一旦您在数组“lines”中有了这些行，您就可以自己弄清楚如何做这些事情。