2

I would like to add select2 to jquery query builder with loading remote data.

This is my code 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
    })

The select2 is correctly load, but when i write is not loading the ajax source. Why is not loading the ajax source?

Jose Moreno
  • 81
  • 7

1 Answers1

0

A little bit late for the answer, but it still might be useful for others.
Ajax doesn't work because the Select2 wraps around <input type="text" ...> element, and regarding to this thread inputs are not allowed to be target elements for plugins configured using a remote source.

I suggest using select as input instead:

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