Обнаружить отсутствие результатов поиска по поиску - Selectize.js

Question

Есть ли способ обнаружить пустой результат поиска при работе с Selectize.js?

Если пользователь что-то печатает и не получает содержимое из выпадающего списка, есть ли способ обнаружить пустые поиски?

Answer 1

Selectize.js имеет событие под названием onType, Когда пользователь вводит что-то, происходит событие onType. Вам просто нужно зарегистрировать это событие при инициализации Selectize.js, Затем вы должны подсчитать общий результат, возвращаемый фильтром.

Вот реализация:

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

Для информации, пожалуйста, посетите следующую ссылку:

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

Answer 2

Согласно документации, selectize.js имеет onChange событие. Вы должны быть в состоянии подключиться к этому и проверить, есть ли в списке выбора какие-либо опции или нет. Если нет, вы можете запустить свой код "что-то еще".

Посмотрите пример выбора города / штата в ссылке для получения более подробной информации о том, как использовать onChange событие. Вот исходный код демо.

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