Created
July 24, 2014 13:56
-
-
Save mudassir0909/2d5c50a411829733d547 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">' + data.message + '</div>' + | |
'</div>' | |
); | |
} | |
}, options ); | |
self.displayEmptyResultsMessage = function () { | |
this.$empty_results_container.css( 'top', this.$control.outerHeight() ); | |
this.$empty_results_container.show(); | |
}; | |
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(); | |
}; | |
})(); | |
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(); | |
}; | |
})(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks, works great!
There's only one quirk - the "no results" message is displayed after init if selectize has no options. Can it be modified to only do it following keyboard events?
Cheers!
EDIT:
This fork contains the fix:
https://gist.github.com/mudassir0909/2d5c50a411829733d547/forks