'JQuery Query-Builder adding autocomplete plugin

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.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source