-
-
Save matt-whiteley/da7396d823b4ed2b5f18921d7517a2aa to your computer and use it in GitHub Desktop.
A hacky plugin to display "No results found" message on selectize. Don't use this along with "dropdown_header" plugin though.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
https://github.com/brianreavis/selectize.js/issues/470 | |
Selectize doesn't display anything to let the user know there are no results. | |
This is a temporary patch to display a no results option when there are no | |
options to select for the user. | |
*/ | |
Selectize.define( 'no_results', function( options ) { | |
var self = this; | |
options = $.extend({ | |
message: 'No results found.', | |
html: function(data) { | |
return ( | |
'<div class="selectize-dropdown ' + data.classNames + ' dropdown-empty-message">' + | |
'<div class="selectize-dropdown-content"><div>' + data.message + '</div></div>' + | |
'</div>' | |
); | |
} | |
}, options ); | |
self.displayEmptyResultsMessage = function () { | |
this.$empty_results_container.css( 'top', this.$control.outerHeight(), width: this.$control.outerWidth() ); | |
this.$empty_results_container.show(); | |
this.$control.addClass("dropdown-active"); | |
}; | |
self.refreshOptions = (function () { | |
var original = self.refreshOptions; | |
return function () { | |
original.apply( self, arguments ); | |
this.hasOptions ? this.$empty_results_container.hide() : | |
this.displayEmptyResultsMessage(); | |
} | |
})(); | |
self.onKeyDown = (function () { | |
var original = self.onKeyDown; | |
return function ( e ) { | |
original.apply( self, arguments ); | |
if ( e.keyCode === 27 ) { | |
this.$empty_results_container.hide(); | |
} | |
} | |
})(); | |
self.onBlur = (function () { | |
var original = self.onBlur; | |
return function () { | |
original.apply( self, arguments ); | |
this.$empty_results_container.hide(); | |
this.$control.removeClass("dropdown-active"); | |
}; | |
})(); | |
self.setup = (function() { | |
var original = self.setup; | |
return function() { | |
original.apply(self, arguments); | |
self.$empty_results_container = $( options.html( $.extend( { | |
classNames: self.$input.attr( 'class' ) }, options ) ) ); | |
self.$empty_results_container.insertBefore( self.$dropdown ); | |
self.$empty_results_container.hide(); | |
}; | |
})(); | |
}); |
FWIW - this worked great for me, but I had to make a syntax change. Running in Chrome I got a function definition error for "displayEmptyResultsMessage()". It didn't like the comma-separated params list.
I fixed this by running the offending line in two lines, jQuery style:
self.displayEmptyResultsMessage = function () {
this.$empty_results_container.css( 'top', this.$control.outerHeight() );
this.$empty_results_container.css('width', this.$control.outerWidth() );
this.$empty_results_container.show();
this.$control.addClass("dropdown-active");
};
Thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Modified to apply the same styling to the "no results" option as is given to the normal options.
Also sets the "dropdown-active" class properly when showing no results, as the dropdown is open at this time and certain style needs to be applied for consistency.