Skip to content

Instantly share code, notes, and snippets.

@christianmagill
Created March 15, 2016 13:31
Show Gist options
  • Save christianmagill/a43772878df798830d0b to your computer and use it in GitHub Desktop.
Save christianmagill/a43772878df798830d0b to your computer and use it in GitHub Desktop.
/* ========================================================================
// Multi Select
// ========================================================================*/
/* ------------------------------------------------------------------------
// Sortable
// ------------------------------------------------------------------------*/
function multiSelectSortableAfterInit(that, container){
container.find('.ms-selection ul').sortable();
}
/* ------------------------------------------------------------------------
// Limiter
// ------------------------------------------------------------------------*/
function multiSelectLimiterAfterInit(that, container){
that.selectLimit = (that.$element.attr('data-select-limit') !== "") ? parseInt(that.$element.attr('data-select-limit')) : -1;
that.selectCount = that.$element.find(':selected').length;
if(that.$element.data('initialized') !== true && that.selectLimit > -1) {
that.$element.data('initialized', true);
multiSelectLimiterUpdate(that);
}
}
function multiSelectLimiterAfterSelect(that, values){
if(values){
that.selectCount += values.length;
}
multiSelectLimiterUpdate(that);
}
function multiSelectLimiterAfterDeselect(that, values){
if(values){
that.selectCount -= values.length;
}
multiSelectLimiterUpdate(that);
}
function multiSelectLimiterUpdate(that){
var selectedValues = that.$element.val();
if(that.selectCount >= that.selectLimit){
that.$element.children().each(function(){
if(!_.contains(selectedValues, this.value)){
$(this).attr('disabled', 'disabled');
}
});
that.$selectableUl.children().addClass(that.options.disabledClass);
}
else{
that.$element.children().removeAttr('disabled');
that.$selectableUl.children().removeClass(that.options.disabledClass);
}
}
/* ------------------------------------------------------------------------
// Searchable
// ------------------------------------------------------------------------*/
function multiSelectSearchableAfterInit(that, container){
var $selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
.on('keydown', function(e){
if (e.which === 40){
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function(e){
if (e.which == 40){
that.$selectionUl.focus();
return false;
}
});
}
function multiSelectSearchableAfterSelect(that, values){
that.qs1.cache();
that.qs2.cache();
}
function multiSelectSearchableAfterDeselect(that, values){
that.qs1.cache();
that.qs2.cache();
}
/* ------------------------------------------------------------------------
// Initialize
// ------------------------------------------------------------------------*/
$('.searchable').multiSelect({
selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Search...'>",
selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Search...'>",
afterInit: function(container){
console.log('after init');
multiSelectSortableAfterInit(this, container); // Call sortable function
multiSelectLimiterAfterInit(this, container);
multiSelectSearchableAfterInit(this, container);
},
afterSelect: function(values){
console.log('after select');
multiSelectLimiterAfterSelect(this, values);
multiSelectSearchableAfterSelect(this, values);
},
afterDeselect: function(values){
console.log('after deselect');
multiSelectLimiterAfterDeselect(this, values);
multiSelectSearchableAfterDeselect(this, values);
}
});
@RileyEv
Copy link

RileyEv commented Dec 4, 2016

Line 47 should be if(!$.contains(selectedValues, this.value)){

@Faisal-nfl
Copy link

causing issue with selectLimit = 0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment