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

我会以某种方式假设类似的事情已经被问过但找不到任何东西。

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

我不知道从哪里开始以及如何开始。到目前为止我做了什么。 自动完成功能有效，但还没有“添加”按钮。 左侧列表已填充。

有哪些好的方法：

• 左右移动学生
• 将列表与自动完成框连接起来

我不会被服务器端部分（PHP/mysql）困扰，但我很少使用 js/jQuery，并且很高兴获得有关如何解决此问题的任何提示。

像这样的东西吗？

$('#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");
});

markup:

<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/ http://jsfiddle.net/niklasvh/3SrKL/