Переместить элементы списка между двумя контейнерами, объединить с автозаполнением

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);
}

Затем добавьте событие щелчка к каждой стрелке, которая затем захватывает элемент, содержащий студента. Затем удалите его из списка слева и добавьте в список справа. Что-то вроде:

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

Для подключения блока автозаполнения, если каждый элемент учащегося имеет уникальный идентификатор, который вы можете сгенерировать из блока автозаполнения, вы можете затем захватить этот элемент по идентификатору и переместить элемент, как указано выше.