Question

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

1. At the beginning, all students are in the left list.
2. User can move students to the right list by clicking on the arrow
3. User can move students back to the original list
4. If group of students is too large, user can search with autocomplete
5. Pressing add (or enter) adds shifts the autocompleted student from left to right

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.

What are good ways for:

• moving the students left and right
• connecting the lists with the autocomplete box

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.

Answer 1

Something like 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");
});

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>

example: http://jsfiddle.net/niklasvh/3SrKL/