将列表中的元素两个集装箱之间，结合自动完成 [英] Move list elements between two containers, combine with autocomplete

问题描述

我会莫名其妙地认为这样的事情已经被问，但无法找到任何东西。

I would somehow assume that something like that has been asked but can't find anything.

1. 在开始的时候，所有的学生都在左侧列表中。
2. 用户可以通过点击箭头移到学生到右侧列表
3. 用户可以将学生回原目录
4. 如果学生群体过大，用户可与自动完成搜索
5. pressing增加（或输入）增加班次的自动完成学生从左至右

我失去了在哪里以及如何下手。我到目前为止已经完成。 自动完成的作品，有没有添加按钮呢。 左侧列表填充的。

I'm lost with where and how to start. What I've done so far. Autocomplete works, there is no 'add' button yet. The left list is populated.

有什么好方法了：

• 动的学生左，右
• 连接列表和自动完成箱

我不被服务器端部分（PHP / MySQL的）的困扰，但我很少用js / jQuery和。将很高兴为任何线索如何处理这一点。

I'm not troubled by the serverside parts (PHP/mysql), but I rarely use js/jQuery and would be glad for any hints on how to approach this.

推荐答案

这样的事情？

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

这篇关于将列表中的元素两个集装箱之间，结合自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！