149 lines
5.3 KiB
JavaScript
149 lines
5.3 KiB
JavaScript
/*
|
|
* Multiselect with filter JavaScript Library v1.1
|
|
*/
|
|
(function() {
|
|
SelMultiBox = (function() {
|
|
|
|
function SelMultiBox(obj){
|
|
var _this = this;
|
|
|
|
_this.o = $(obj);
|
|
_this.to = $(obj).find(".chosen select");
|
|
_this.from = $(obj).find(".available select");
|
|
|
|
if(!_this.to.is(':disabled') && !_this.from.is(':disabled'))
|
|
_this.bindEvents();
|
|
//_this.bindFilter();
|
|
|
|
_this.clone = _this.from.clone(true);
|
|
_this.initBaseSelection();
|
|
|
|
// Create Jquery Pseudo
|
|
jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {
|
|
return function (elem) {
|
|
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
|
|
};
|
|
});
|
|
|
|
}
|
|
|
|
SelMultiBox.o = {};
|
|
SelMultiBox.to = {};
|
|
SelMultiBox.from = {};
|
|
SelMultiBox.clone = {};
|
|
|
|
SelMultiBox.prototype.bindEvents = function(){
|
|
var _this = this;
|
|
|
|
// bind each filter
|
|
_this.o.find(".sel-cnt input.search_text").each(function(){
|
|
_this.bindFilter(this);
|
|
});
|
|
|
|
// Bind dbl clicks on each selection node
|
|
_this.from.find("option").dblclick(function(){
|
|
var parent = $(this).closest('.sel-cnt');
|
|
_this.dblClickNodeMove((!parent.hasClass("chosen")?_this.to:_this.from), $(this));
|
|
});
|
|
_this.to.find("option").dblclick(function(e){
|
|
var parent = $(this).closest('.sel-cnt');
|
|
_this.dblClickNodeMove((!parent.hasClass("chosen")?_this.to:_this.from), $(this));
|
|
});
|
|
|
|
// Bind arrow clicks
|
|
_this.o.find(".selector-add").click(function(){
|
|
_this.moveSelectedNodes(_this.from, _this.to);
|
|
});
|
|
_this.o.find(".selector-remove").click(function(){
|
|
_this.moveSelectedNodes(_this.to, _this.from);
|
|
});
|
|
|
|
// Bind move all nodes from one to another conatiner
|
|
_this.o.find(".chooseall").click(function(){
|
|
_this.moveAllNodes(_this.from, _this.to);
|
|
});
|
|
_this.o.find(".clearall").click(function(){
|
|
_this.moveAllNodes(_this.to, _this.from);
|
|
});
|
|
|
|
};
|
|
// Move all nodes
|
|
SelMultiBox.prototype.moveAllNodes = function(from, to){
|
|
var clone = from.find("option").clone(true);
|
|
to.append(clone);
|
|
from.find("option").remove();
|
|
this.resetItemCount();
|
|
};
|
|
// Move selected nodes
|
|
SelMultiBox.prototype.moveSelectedNodes = function(from, to){
|
|
from.find("option:selected").each(function(){
|
|
var clone = $(this).clone(true);
|
|
to.append(clone);
|
|
$(this).remove();
|
|
});
|
|
this.resetItemCount();
|
|
};
|
|
// Bind dbl click node move
|
|
SelMultiBox.prototype.dblClickNodeMove = function(to, node){
|
|
var clone = node.clone(true);
|
|
to.append(clone);
|
|
node.remove();
|
|
this.resetItemCount();
|
|
};
|
|
// Bind & handle filter
|
|
SelMultiBox.prototype.bindFilter = function(obj){
|
|
var _this = this;
|
|
|
|
$(obj).bind({
|
|
keyup : function(e){
|
|
|
|
var val = $(this).val();
|
|
|
|
// Clear search
|
|
if(e.which == 27 && val.length){
|
|
$(this).val("").keyup();
|
|
|
|
// Filter select box
|
|
}else{
|
|
var found;
|
|
if(val.length){
|
|
_this.from.html("");
|
|
found = _this.clone.find("option:icontains('"+val+"')").not(_this.to.find("option").map(function() { return "[value='" + this.value + "']"; }).get().join(",")).clone(true);
|
|
|
|
if(found.length)
|
|
_this.from.append(found);
|
|
}else{
|
|
_this.from.html("");
|
|
_this.from.append(_this.clone.find("option").not(_this.to.find("option").map(function() { return "[value='" + this.value + "']"; }).get().join(",")).clone(true));
|
|
}
|
|
|
|
_this.resetItemCount();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
// Move selected items to chosen container
|
|
SelMultiBox.prototype.initBaseSelection = function(){
|
|
var _this = this;
|
|
_this.from.find("option:selected").each(function(){
|
|
_this.to.append($(this).clone(true));
|
|
_this.to.find("option:selected").attr("selected", false);
|
|
$(this).remove();
|
|
});
|
|
_this.resetItemCount(true);
|
|
};
|
|
// Reset item correct counter
|
|
SelMultiBox.prototype.resetItemCount = function(all){
|
|
if(!$.isDefined(all)){
|
|
all = ":visible";
|
|
}else{
|
|
all = "";
|
|
}
|
|
this.to.closest(".sel-cnt").find(".subbtns .count").html(this.to.find("option"+all).length);
|
|
this.from.closest(".sel-cnt").find(".subbtns .count").html(this.from.find("option"+all).length);
|
|
};
|
|
|
|
return SelMultiBox;
|
|
})();
|
|
|
|
}).call(this); |