Selectize通过Ajax加载数据库数据后下拉选项无法渲染显示

• Selectize 加载选项的load回调只接受对象数组格式的入参：官方示例中传入的是res.repositories.slice(0, 10)，本身就是仓库对象组成的数组；而你当前接口返回的是单个商品JSON对象，不是数组结构，Selectize识别不到有效选项列表，不会触发render逻辑渲染下拉项。
• success回调中重复调用了两次callback：第二次传入的是console.log(res)的返回值（固定为undefined），会覆盖第一次传入的结果，属于无效调用。
• 注释掉了searchField配置：Selectize缺少明确的搜索匹配字段规则，可能导致选项匹配过滤异常。

1. 给callback传入数组格式的选项数据：如果接口固定返回单个商品，手动将返回结果包装为数组；如果接口后续会返回匹配关键词的商品列表（数组格式），直接传入返回的数组即可。
2. 删除多余的callback调用，将日志打印逻辑独立出来，不要放在callback的参数位置。
3. 恢复searchField配置，明确指定搜索匹配的字段为商品名称name。

修复后的可运行代码：

$(".add-items-select").selectize({
    valueField: "id",
    labelField: "name",
    searchField: "name",
    create: true,
    render: {
      option: function (item, escape) {
        return "<div><span class='title'>" + escape(item.id) + " - " + escape(item.name) + "</span></div>";
      },
    },
    load: function (query, callback) {
      if (!query.length) return callback();
      $.ajax({
        url: "http://127.0.0.1:8000/warehouse/api/products/" + encodeURIComponent(query) + "/?format=json",
        type: "GET",
        error: function () {
          callback();
        },
        success: function (res) {
          console.log(res);
          // 自动判断返回值类型，非数组则包装为单元素数组传入
          callback(Array.isArray(res) ? res : [res]);
        },
      });
    },
});

如果后续你的接口调整为返回多商品匹配结果，比如结构为[{"id":1,"name":"teyit",...}, {"id":2,"name":"test",...}]的数组格式，不需要额外做包装，直接调用callback(res)即可正常渲染。

内容的提问来源于stack exchange，提问作者sk1p