jquery - 选择使用自定义渲染动态刷新项目

Question

如果您在选择下拉列表中创建了自定义呈现功能，是否可以使用 ajax 动态刷新下拉项目？我可以执行其中之一，但是当我组合功能的两个部分时，选择下拉项不会重新呈现。

我已使用回调函数来设置新的选项列表。

页面加载时，选择控件将使用以下 JavaScript 代码进行初始化。

var $select = $(item).selectize({
  create: false,
  sortField: 'text',
  selectOnTab: true,
  valueField: 'id',
  labelField: 'text',
  searchFields: ['text'],
  render: {
    item: function(selectItem, escape) {
      var splitAt = selectItem.text.indexOf(';');
      var label;
      var caption = '';
      if (splitAt > 0) {
        label = selectItem.text.substring(0, splitAt);
        caption = selectItem.text.substring(splitAt + 1);
      } else {
        label = selectItem.text;
      }

      return '<div>' +
        (label ? '<span class="text">' + escape(label) + '</span>' : '') +
        (caption ? '<span class="description">' + escape(caption) + '</span>' : '') +
        '</div>';
    },
    option: function(selectItem, escape) {
      var splitAt = selectItem.text.indexOf(';');
      var label;
      var caption = '';
      if (splitAt > 0) {
        label = selectItem.text.substring(0, splitAt);
        caption = selectItem.text.substring(splitAt + 1);
      } else {
        label = selectItem.text;
      }

      return '<div>' +
        '<span class="label">' + escape(label) + '</span>' +
        (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
        '</div>';
    }
  }
});

然后我有一个 ajax 方法，该方法请求最新的下拉选项并尝试更新选择控件:

var refreshSuppliers = function() {
    $.getJSON('url/suppliers', function(results) {
      if (results) {
        var selectOptions = [];
        for (var index = 0, length = results.length; index < length; index++) {
          var item = results[index];
          selectOptions.push({
            text: item.Option,
            value: item.Id.toString()
          });
        }

        var selectize = $("#Supplier")[0].selectize;
        selectize.clear();
        selectize.clearOptions();
        selectize.load(function(callback) {
          callback(selectOptions);
        });
      }
    })

该方法运行后，网页上的下拉列表为空。如果我删除所有自定义渲染并将其视为简单的选择下拉列表，则用于更新下拉列表的 ajax 调用将起作用。

有没有办法让这两个功能一起工作？

Answer 1

selectize.js 库中似乎存在一个错误，当您调用clearOptions() 时，渲染的输出不会从 renderCache 中清除。我可以通过手动清除缓存来使其正常工作:

selectize.clearOptions();
selectize.renderCache = {};
selectize.load(function(callback) {
    callback(selectOptions);
 });

github 上有一个 Unresolved 问题: https://github.com/brianreavis/selectize.js/issues/260