Skip to content

Instantly share code, notes, and snippets.

@bkosborne
Created July 24, 2014 15:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save bkosborne/56ee6a6559ac66d64490 to your computer and use it in GitHub Desktop.
Save bkosborne/56ee6a6559ac66d64490 to your computer and use it in GitHub Desktop.
Selectize plugin to help show a "no results" message when your options are loaded dynamically
// Selectize doesn't support returning a "no results" message. This plugin
// tries to add the capability to display a no results message.
// Note that it won't actually display the message here automatically.
// Instead we show the empty results container manually in our AJAX callback
// when we load options dynamically and there are no results.
// See https://github.com/brianreavis/selectize.js/issues/470
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" style="padding: 3px 12px">' + data.message + '</div>' +
'</div>'
);
}
}, options );
self.displayEmptyResultsMessage = function () {
this.$empty_results_container.css( 'top', this.$control.outerHeight() );
this.$empty_results_container.show();
};
self.onKeyDown = (function () {
var original = self.onKeyDown;
return function ( e ) {
original.apply( self, arguments );
this.$empty_results_container.hide();
}
})();
self.onBlur = (function () {
var original = self.onBlur;
return function () {
original.apply( self, arguments );
this.$empty_results_container.hide();
};
})();
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();
};
})();
});
@rombat
Copy link

rombat commented Dec 13, 2015

Hi,
I can't make it work.
Am I supposed to do something else besides loading this .js and adding plugins: ['no_results'] to my Selectize?

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