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?

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?

• javascript
• selectize.js

• What are you trying to do? What would you like to happen with an empty search? – Jeff Commented Sep 10, 2014 at 3:14
• Suggest something else or log the empty searches. – Kim Kyo Commented Sep 10, 2014 at 3:15

2 Answers 2

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./brianreavis/selectize.js/blob/master/docs/usage.md#callbacks

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./api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
                success: function(results) {
                    select_city.enable();
                    callback(results);
                },
                error: function() {
                    callback();
                }
            })
        });
    }
});