Skip to content

Instantly share code, notes, and snippets.

@matt-whiteley
Forked from mudassir0909/selectize_no_results.js
Last active July 18, 2017 18:26
Show Gist options
  • Save matt-whiteley/da7396d823b4ed2b5f18921d7517a2aa to your computer and use it in GitHub Desktop.
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.
/*
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();
};
})();
});
@matt-whiteley
Copy link
Author

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.

@b-malone
Copy link

b-malone commented Jul 18, 2017

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