JSFiddle - React, Tailwind, and code Playground

by Unspecified

HTML

<link rel="stylesheet" href="http://brianreavis.github.io/selectize.js/css/selectize.bootstrap3.css">
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<select id="test" placeholder="Choose a language...">

</select>

CSS

@import url(http://fonts.googleapis.com/css?family=Questrial);
 @import url(http://weloveiconfonts.com/api/?family=zocial);

* {
    font-family: Questrial !important;
}
body {
    padding: 40px;
    background: white;
}

JavaScript

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();
        };
    })();
});

$('#test').selectize({
    create: false,
    dropdownParent: 'body',
    plugins: [
        'no_results']
});