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

Share Improve this question Follow edited Sep 10, 2014 at 3:13 Jeff 14.3k1212 gold badges6060 silver badges107107 bronze badges asked Sep 9, 2014 at 8:23 Kim KyoKim Kyo 7511 silver badge55 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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