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') 并将其粘贴到变量中，但没有成功。

我对这件事的看法

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

想知道是否有人可以启发我了解我的想法以及如何解决这个问题。谢谢！

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

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”中找到了行，您就可以弄清楚如何自己做这些事情。