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

我会以某种方式假定类似的东西已被问到，但找不到任何东西。移动两个容器之间的列表元素，并结合自动完成

开始时，所有的学生都在左边的列表中。
用户可以通过点击箭头
用户可以移回学生原来的列表
如果学生群体过大，用户可以自动完成
按添加搜索（移动学生到右侧列表或进入）增加班次的自动完成的学生从左至右

我失去了在哪里以及如何开始。我到目前为止所做的。自动完成工作，没有'添加'按钮。左侧列表已填充。

有什么好的途径：

移动学生左右
与自动完成框

我不是由服务器端部件的困扰（PHP连接列表/ mysql），但我很少使用js/jQuery，并且很乐意提供关于如何解决这个问题的提示。

2011-06-06 markus

你的意思是这样吗？ http://dpatri.com/technology/jquery/move-list-box-items-from-left-to-right-using-jquery/ – Sparkup 2011-06-06 19:16:11

@Jeremy Heiler你为什么要删除你的答案？ – markus 2011-06-06 19:22:46

由于@尼克拉斯的答案是更好的方法和一个工作的例子。 – Jeremy 2011-06-06 19:24:02

像这样的东西？

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

来源

2011-06-06 19:19:05 Niklas

这看起来像一个伟大的开始，我很惊讶！ :) – markus 2011-06-06 19:23:19

这里是我的快速想法：

首先，创建一个移动函数。

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

用于连接自动完成框中，如果每个学生元件具有一个唯一的ID，你可以从自动完成框中生成，然后你可以通过抢ID该元素和移动元素像上面。

来源

2011-06-06 19:18:49 Jeremy

感谢您的宝贵意见！ – markus 2011-06-06 19:29:04

我认为@Niklas的答案唯一的好处是，它可能稍微快一些（对于较大的列表）为每个学生生成一个id，用于搜索，而不是过滤列表。 – Jeremy 2011-06-06 19:37:26

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

回答

相关问题