keepOrder not working on afterSelect, afterDeselect.

[kantsverma]

I want to keep the same order of options as loaded on afterInit. On-page load options are loading alphabetically. When I deselect the option from the selected it does not keep the option in the same order.

Please check the screenshot below you will understand Z should appear at last

Below are code that I am using

var total_fonts = '<?=count($get_fonts)?>';
	jQuery('.searchable').multiSelect({
	  keepOrder: true,
	  selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Master Font List'>",
	  selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selected Fonts'>",
	  selectableFooter: "<div class='custom-header'>Selectable Fonts <span id='totalFonts'>0</span></div>",
	  selectionFooter: "<div class='custom-header'>Selected Fonts <span id='selectedFonts'>0</span></div>",	  
	  afterInit: function(ms){
		// updat the selected fonts 
		var selected_fonts =  jQuery("#manage-fonts :selected").length;
		jQuery("#selectedFonts").html(selected_fonts);
		// update the no of total fonts 
		//var total_fonts =  jQuery("#manage-fonts option:not(:selected)").length;				
		jQuery("#totalFonts").html(total_fonts);
		
		var that = this,
			$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;
		  }
		});
	  },
	  afterSelect: function(){
		// updat the selected fonts 
		var selected_fonts =  jQuery("#manage-fonts :selected").length;
		//jQuery("#selectedFonts").html(selected_fonts);
		jQuery("#selectedFonts").html((parseInt(jQuery("#selectedFonts").html())+ parseInt(1)));
		
		var update_total_font = (parseInt(jQuery("#totalFonts").html()) - parseInt(1));
		// update the no of total fonts 
		jQuery("#totalFonts").html(update_total_font);
		this.qs1.cache();
		this.qs2.cache();
	  },
	  afterDeselect: function(){
		// updat the selected fonts
		//jQuery("#totalFonts").html(total_fonts);
		var selected_fonts =  jQuery("#manage-fonts :selected").length;
		var update_total_font = (parseInt(jQuery("#totalFonts").html()) + 1);
		console.log('selected_fonts' + selected_fonts +' check_total '+total_fonts);
		jQuery("#totalFonts").html(update_total_font);		
		jQuery("#selectedFonts").html(selected_fonts);
		// update the no of total fonts
		this.qs1.cache();
		this.qs2.cache();
	  }
	});	

[richxrich]

I found this not working at all, even on the demo website it is not working. I'm guessing there was a change in how browsers operate select functions?

I fixed the issue by changing line 401 in jquery.multiselect.js

from if (that.options.keepOrder && method !== 'init') {

to

if (that.options.keepOrder != true && method !== 'init') {

This worked for me in my situtation so take it with a grain of salt. I'm guessing default behavour has changed in the browser at some point in the last few months or years.