Configuring Selectize from php

[nWidart]

Hi,

First of all, thank for building this great tool! 😃

I'm trying to use selectize plugin to make all my dropdowns as selectize instances. One important detail is that I make the filters array from a php script, which I return to the view using json_encode and place inside the filters key.

Something like the following:

$('#builder').queryBuilder({
    sortable: true,

    icons: {
        add_group: 'fa fa-plus',
        add_rule: 'fa fa-plus',
        remove_group: 'fa fa-times',
        remove_rule: 'fa fa-times',
        sort: 'fa fa-sort'
    },

    filters: <?php echo $filters; ?>
});

Only I'm wondering how to use selectize with this kind of structure. Since I can't make that closure you have in the example onInitialize, where you loop over every item to add it to selectize.
I do have the data in the values: key though, like a classic dropdown without plugins.

Thank you!

[mistic100]

use the plugin_options QueryBuilder option and options Selectize option
https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md#data_searching

[mistic100]

and also you certainly won't be able to just use json_encode, one day or another you will want to use the callbacks and then you will have to replace your "echo $filter" by a more complex PHP script

I did that in JSP, it's pretty simple

[nWidart]

Oh right, thank you for the quick answer.

I'm now getting the following error:

TypeError: c is undefined selectize.min.js:2:5666
TypeError: f[c.plugin] is not a function

My the filter section responsible for the drop down as follows:

At first look, it's looking correct, but I'm certainly missing something stupid.

Thank you,

[nWidart]

Using the non minified version I get:

TypeError: MicroPlugin is undefined selectize.js:542:1
TypeError: $inputs[filter.plugin] is not a function

[mistic100]

perhaps you should read the readme of selectize and see that it a require a few dependencies
or use the standalone version https://github.com/brianreavis/selectize.js#files

are we done with the QueryBuilder part ?

[nWidart]

Alright my bad, I didn't include selectize's standalone build.

Input field is empty though, without any js errors.

[nWidart]

Sure.. sorry for the trouble then. Carry on.

[nWidart]

Tried to customize an example in selectize folder, and using the options key works perfectly there. It's only in the builder script where they aren't used.

I even tried to copy the generated filter string, pasted the values inside the selectize demo page, and everything works as expected...
The hidden select element is completely empty.

[mistic100]

any chance to have a live version ?

[nWidart]

Hm can't publish this app, since it's under NDA.

[mistic100]

and I can't help without a POC

[nWidart]

I'll make a quick demo outside the main application.

[nWidart]

Here it is: http://www.maatwebsite.nl/demo-builder/
The 'Country' option.