Detect no result return by search - Selectize.js

Question

Is there any way to detect empty search result when working with Selectize.js ?

If user types something and if they do not get the content from dropdown list, is there any way to detect the empty searches?

Answer 1

Selectize.js has an event called onType . When user type something, onType event will fire. You just need to register this event when you initialise the Selectize.js . Then, you have to count total results return by the filter.

Here is the implementation:

$('select[name=country_id]').selectize({
      // When user type something, onType event will fire.
      onType  : function(text) {
        if ( ! this.currentResults.items.length) {
          $('#country-not-found').removeClass('hide');
        } else {
          $('#country-not-found').addClass('hide');
        }
      }
    });

For information please visit the following link:

https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md#callbacks

Answer 2

According to the documentation , selectize.js has an onChange event. You should be able to hook into that and check to see if the select list has any options or not. If not, you can run your "something else" code.

Check out the City / State Selection example in the link for more details on how to use the onChange event. Here is the demo's source code.

$select_state = $('#select-cities-state').selectize({
    onChange: function(value) {
        if (!value.length) return;
        select_city.disable();
        select_city.clearOptions();
        select_city.load(function(callback) {
            xhr && xhr.abort();
            xhr = $.ajax({
                url: 'http://www.corsproxy.com/api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
                success: function(results) {
                    select_city.enable();
                    callback(results);
                },
                error: function() {
                    callback();
                }
            })
        });
    }
});