Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

303
Vistas
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.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda