javascript - 如何将带有 ajax 的 select2 添加到 jquery 查询构建器？

Question

我想通过加载远程数据将 select2 添加到 jquery 查询生成器。

这是我的代码https://jsfiddle.net/cxz2m3y7/22/：

$('#builder-widgets').queryBuilder({
      plugins: ['bt-tooltip-errors'],
      filters: [{
        id: 'category',
        label: 'select2',
        type: 'string',
        plugin: 'select2',
        plugin_config: {
          ajax: {
            url: "https://api.github.com/search/repositories",
            dataType: 'json',
            delay: 250,
            data: function (params) {
              return {
                q: params.term, # search term
                page: params.page
              };
            },
            processResults: function (data, params) {
              # parse the results into the format expected by Select2
              # since we are using custom formatting functions we do not need to
              # alter the remote JSON data, except to indicate that infinite
              # scrolling can be used
              params.page = params.page || 1;

              return {
                results: data.items,
                pagination: {
                  more: (params.page * 30) < data.total_count
                }
              };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, # let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatRepo, # omitted for brevity, see the source of this page
        templateSelection: formatRepoSelection # omitted for brevity, see the source of this page
        },
        valueSetter: function(rule, value) {}
      }],
      rules: rules_widgets
    })

select2 已正确加载，但是当我编写时未加载 ajax 源。为什么不加载ajax源？

Answer 1

答案有点晚了，但它仍然可能对其他人有用。
Ajax 不起作用，因为 Select2 环绕<input type="text" ...>元素，并且关于此线程输入不允许作为使用远程源配置的插件的目标元素。

我建议改用select作为输入：

$(widget_id).queryBuilder({
  filters: [{
    id: 'field_id',
    label: 'Subject',
    type: 'integer',
    input: 'select',
    plugin: 'select2',
    plugin_config: your_plugin_config,
    operators: ['equal']
  }]
});