javascript - 偵測搜尋無結果返回 - Selectize.js

在使用 Selectize.js 時，有沒有辦法檢測到空的搜索結果？

如果使用者輸入某些內容，但沒有從下拉列表中獲取任何內容，有沒有辦法檢測空搜尋？

答案＃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

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