Javascript 在两个容器之间移动列表元素，并结合自动完成

我会想当然地认为有人问过类似的问题，但什么也找不到

开始时，所有学生都在左边的列表中

用户可以通过单击箭头将学生移动到右侧列表

用户可以将学生移回原始列表

如果学生组太大，用户可以使用“自动完成”进行搜索

按add（或enter）添加将自动完成的学生从左向右移动

我不知道从哪里开始，怎么开始。我到目前为止所做的一切。 自动完成功能正常，但还没有“添加”按钮。 左侧列表已填充

有哪些好方法可以：

• 左右移动学生
• 使用“自动完成”框连接列表

---

我不为服务器端部件（PHP/mysql）所困扰，但我很少使用js/jQuery，我很乐意得到关于如何实现这一点的任何提示。

以下是我的快速想法：

首先，创建一个move函数

function move(el, from, to){
    from.remove(el);
    to.append(el);
}

然后，向每个箭头添加一个click事件，该事件将捕获包含该学生的元素。然后将其从左侧列表中删除并附加到右侧列表中。比如：

$('.student_arrow').click(function(){
    var student = $(this).parent(); // just a guess
    move($("#left"), $("#right"), student);
});

对于连接自动完成框，如果每个学生元素都有一个唯一的id，您可以从自动完成框中生成该id，然后您可以按id抓取该元素并像上面那样移动该元素。

类似的内容

$('#students li').live("click",function(){
   $(this).appendTo("#selectedStudents") 
});

$('#selectedStudents li').live("click",function(){
   $(this).appendTo("#students") 
});

$('#add').click(function(){
    $('#students li').filter(function(){
        if( $(this).text().toLowerCase() == $('#search').val().toLowerCase()){
            return true;
        }
    }).appendTo("#selectedStudents");
});

标记：

<input type="text" id="search" /><input type="button" value="add" id="add" />

<h4>students</h4>
<ul id="students">
    <li>Robert</li>
    <li>Steve</li>
    <li>Clara</li>
    <li>Beatrix</li>
    <li>Maximilian</li>
</ul>

<h4>selected students</h4>
<ul id="selectedStudents"></ul>

学生

罗伯特
史蒂夫
克拉拉
比阿特丽克斯
马西米兰

选定的学生

---

示例：

你是说像这样@Jeremy Heiler你为什么要删除你的答案？因为@Niklas'的答案更好，而且是一个有效的例子。@Jeremy Heiler像这样的问题总是有多个答案。方法越多越好。我个人总是喜欢看到其他人做这类事情的方式也不一样。这并不意味着你的答案没有任何帮助！请取消删除它！这看起来是一个很好的开始，我很惊讶！：）我想oover@Niklas的答案的唯一优点是，它可能会稍微快一点（对于较大的列表），为每个学生生成一个id，用于搜索，而不是过滤列表。