JQuery Query-Builder adding autocomplete plugin

Viewed 174

I'm using jquery-querybuilder to build out a query. I'm currently having an issue with adding in selectize as a plugin to allow for autocomplete inside the select inputs. I'm logging the data in the for loop and it prints out the correct data so I know its physically getting the data, but when typing in the input box, there is still no autocomplete and I'm not quite sure where I went wrong.

let totalMachines = [];

 var rules_basic = {
        condition: 'AND',
        rules: [{
        }, {
          condition: 'OR',
          rules: [{
          }, {
   
          }]
        }]
      };


      let options = {
        plugins: [],
        allow_empty: true,
        
        filters: [
        {
          id: 'machineName',
          label: 'Machine Name',
          type: 'string',
          input: 'text',
          operators: ['equal'],
          plugin: 'selectize',
          values: {
          },
          plugin_config: {
            valueField: 'id',
            labelField: 'machineName',
            searchField: 'machineName',
            sortField: 'machineName',
            create: false,
            maxItems:3,
            plugins: ['remove_button'],
            onInitialize: function() {
              var that = this;
              totalMachines.forEach(function(item) {
                that.addOption(item);
                console.log(item)
              });
            }
          },
          valueSetter: function(rule, value) {
            rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
          }   
        },
]
}

 $.ajax({
        url: '/api-endpoint',
        type: 'GET',
        contentType: 'application/json',
        dataType: 'json',
        success: function(response){
          console.log(response)
          response.forEach((res) => {
            totalMachines.push(res[0])
          })
        console.log(totalMachines)
        }
      })
.then(() => {
           // 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');
            }
        });

        $('#builder').queryBuilder(options)
        })

It would be extremely helpful if someone could help me figure out how to properly configure this plugin, I've looked at every thread and haven't been able to figure it out.

0 Answers
Related