A selectize plugin to display "No results found." message.

selectize_no_results.js

$(document).ready(function() {
/*
  https://github.com/brianreavis/selectize.js/issues/470
  Selectize doesn't display anything to let the user know there are no results.
  This plugin allows us to render a no results message when there are no
  results are found to select for.
*/

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 + '">' +
          '<div class="selectize-dropdown-content">' +
            '<div class="no-results">' + data.message + '</div>' +
          '</div>' +
        '</div>'
      );
    }
  }, options );

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

  self.refreshOptions = (function () {
    var original = self.refreshOptions;

    return function () {
      original.apply(self, arguments);
      if (this.hasOptions || !this.lastQuery) {
        this.$empty_results_container.hide()
      } else {
        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();
    };
  })();
});
});

I also extended the default styles in the following way:

.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header,
.selectize-dropdown .no-results {
  padding: 5px 8px;
}
.selectize-dropdown .active.create,
.selectize-dropdown .active.no-results {
  color: #495c68;
}
.selectize-dropdown .create,
.selectize-dropdown .no-results {
  color: rgba(48, 48, 48, 0.5);
}

The end result works pretty well.

Do you have a fiddler example of this in action?

Work perfectly.
I just made an adjustment for no_results to work together with create.
The code is this:

           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.css('box-shadow', 0);
                this.$empty_results_container.show();
                this.$control.addClass("dropdown-active");
                if (this.hasOptions) {
                    this.$dropdown.css('margin-top', '30px');
                    this.$dropdown.css('border-top', '0');
                    this.$dropdown.css('box-shadow', '0px 10px 12px rgb(0 0 0 / 18%)');
                }
            };

            self.refreshOptions = (function () {
                var original = self.refreshOptions;

                return function () {
                    original.apply(self, arguments);
                    if (this.currentResults.items.length > 0 || !this.lastQuery) {
                        this.$dropdown.css('margin-top', '2px');
                        this.$dropdown.css('border-top', '1px solid #B6B6B6');
                        this.$empty_results_container.hide()
                    } else {
                        this.displayEmptyResultsMessage();
                    }
                }
            })();

Update:
So that noResults works fine when dropdownParent == "body" I made an adjustment.

if (this.settings.dropdownParent && this.settings.dropdownParent == "body") {
    this.$empty_results_container.css('top', this.$dropdown.get(0).style.top);
    this.$empty_results_container.css('left', this.$dropdown.get(0).style.left);
} else {
    this.$empty_results_container.css('top', this.$control.outerHeight());
}

work perfectly. Thanks

Works perfectly. Thank you! For fellow devs use the following to call the plugin. CountryId is the ID of the dropdown tag -

$("#CountryId").selectize({
 plugins: [""no_results"],
 delimiter: ",",
 persist: false,
 create: false, 
});

ref - https://selectize.dev/docs/plugins