带有ajax数据加载的jQuery Selectize.js

Question

我正在尝试通过ajax加载jQuery插件Selectize.js的数据，但我无法从下拉元素中删除先前调用加载的选项。

我被这段代码困住了，我可以通过ajax加载数据并在下拉列表中显示它们，但我想在下拉列表关闭时删除它们（因为键入的文本也被删除）并从另一个ajax调用加载新的数据（输入新文本后），但命令

clearOptions(true) / refreshItems()

不会删除任何内容。我只想删除下拉列表中的项目。如果选择了任何项目，则应保持原样。

var selectize = $('#selectize').selectize({
    sortField: 'text',
    loadThrottle: 500,
    load: function(query, callback) {
      if (query.length < 2) return;

      selectize[0].selectize.clearOptions(true); // this line does not do anything with options in dropdown menu. Even in combine with the line below.
      selectize[0].selectize.refreshItems();

      // simulation of ajax load
      var ajax_data = [{'value': '31', 'text': 'aaa yyy'}, {'value': '32', 'text': 'aaa xxx'}, {'value': '33', 'text': 'bbb xxx'}];
      callback(ajax_data);

      selectize[0].selectize.open();
    }
  });

Answer 1

试试这个方法：

$('#selectize').selectize({
    sortField: 'text',
    loadThrottle: 500,
    onType: function() {
        this.clearOptions(); 
    },
    onDropdownClose: function() {
        this.clearOptions(); 
    },
    load: function(query, callback) {
        if (!query.length || query.length < 2) return callback();
         $.ajax({
            url: 'DATA_URL',
            type: 'GET',
            dataType: 'json',
            data: {
                search: query,
            },
            error: function() {
                callback();
            },
            success: function(res) {
                callback(res);
            }
        });
    }
});