How to implement JQuery Query Builder rule filter autocomplete

Question

How to implemente autocomplete implementation for JQuery quer builder with rule filter?

Answer 1

After spending lot of time with JQuery query builder extensions to make rule filter as autocomplete functionalities.

$('#build-query').queryBuilder({
            plugins: ['sortable', 'bt-tooltip-errors',
                'bt-checkbox',
                'invert',
                'not-group',
                'filter-description'],
            allow_empty: true,
            filters: result,
            rules: customFilters,
            icons: {
                add_group: 'fa fa-plus-square',
                add_rule: 'fa fa-plus-circle',
                remove_group: 'fa fa-minus-square',
                remove_rule: 'fa fa-minus-circle',
                error: 'fa fa-exclamation-triangle',
                sortable: 'fa fa-exclamation-triangle'
            }
        }).on('afterCreateRuleFilters.queryBuilder', function (e, rule) {
            rule.$el.find(QueryBuilder.selectors.rule_filter).selectpicker({
                liveSearch: true,
                style:'width: 500px;',
            });
        });

Please make sure you add supporting javascript references like Jquery builder standlone.js, css Bootstrap.js , css bootstrap selectpicker js , css

Answer 2

screenshot

Here is an example https://github.com/mrisney/jquery-querybuilder-autocomplete

You need to configure a plugin, and use the selectize plugin

const namesList = [{ id: '1', name: 'andrew' }, 
                   { id: '2', name: 'bob' }, 
                   { id: '3', name: 'charles' }, 
                   { id: '4', name: 'david' },
                   { id: '5', name: 'emily' },
                   { id: '6', name: 'frank' },
                   { id: '7', name: 'george' },
                   { id: '8', name: 'harry' },
                   { id: '9', name: 'isabelle' },
                   { id: '10', name: 'jerry' }];

  let pluginConfig = {
    preload: true,
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    options: namesList,
    items: ['2'],
    allowEmptyOption: true,
    plugins: ['remove_button'],
    onInitialize: function () { },
    onChange: function (value) {
    },
    valueSetter: function (rule, value) {
      rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
    },
    valueGetter: function (rule) {
      var val = rule.$el.find('.rule-value-container input')[0].selectize.getValue();
      return val.split(',');
    }
  }

  let filterList = [{
    id: 'age',
    type: 'integer',
    input: 'text'
  },
  {
    id: 'name',
    label: 'name',
    name: 'name',
    type: 'string',
    input: 'text',
    plugin: 'selectize',
    plugin_config: pluginConfig
  }];

  let options = {
    allow_empty: true,
    operators: ['equal', 'not_equal', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
    filters: filterList
  }
  $('#builder').queryBuilder(options);

  // Fix for Selectize
  $('#builder').on('afterCreateRuleInput.queryBuilder', function (e, rule) {
        if (rule.filter.plugin == 'selectize') {
          rule.$el.find('.rule-value-container').css('min-width', '200px')
          .find('.selectize-control').removeClass('form-control');
        }
  });

   // Capture the change event
  $('#builder').on('afterCreateRuleInput.queryBuilder', function (e, rule) {
    var filter = rule.filter;
    var input = rule.$el.find('.rule-value-container input');
    if (filter.id === 'name') {
      input.on('change', function () {
        console.log('name value changed to: ' + input.val());
        let filtersJSON = $('#builder').queryBuilder('getRules', { allow_invalid: true });
        console.log(JSON.stringify(filtersJSON, null, 2));
      });
    }
  });