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

Question

我会以某种方式假设有类似的东西被问到但却找不到任何东西。

1. 一开始，所有学生都在左侧列表中。
2. 用户可以通过单击箭头
将学生移动到正确的列表中
3. 用户可以将学生移回原始列表
4. 如果学生群体太大，用户可以使用自动填充进行搜索
5. 按添加（或输入）会将自动完成的学生从左向右移动



我迷失在哪里以及如何开始。到目前为止我做了什么。 自动填充功能正常，还没有“添加”按钮。 左侧列表已填充。

有什么好办法：

• 左右移动学生
• 使用自动填充框连接列表

我没有受到服务器端部分（PHP / mysql）的困扰，但我很少使用js / jQuery，并且很乐意提供有关如何处理此问题的任何提示。

Answer 1

这样的东西？

$('#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>

示例：http://jsfiddle.net/niklasvh/3SrKL/

Answer 2

这是我的快速想法：

首先，创建一个移动功能。

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抓取该元素并移动上面的元素。