nested autocomplete with selectize plugin

Viewed 645

I am using the query-builder plugin in combination with selectize.js plugin to have autocomplete in my query-builder enabled and it works perfectly.

What I would like to know is whether there is any out of the box way to achieve nested autocomplete with selectize.js, or if not any, which part of code could I customize in the plugin to achieve this functionality.

Example of current autocomplete

working autocomplete example

Code of current autocomplete

            values = [{...}] //values holds the json array of the example
            plugin = 'selectize';
            input = 'text';
            plugin_config = {
                valueField: 'value',
                labelField: 'value',
                searchField: ['value'],
                sortField: 'value',
                nesting: true,
                searchFieldOptions:  [{nesting: true}],
                create: true,
                maxItems: 1,

                onInitialize: function() {
                    var that = this;

                    values.forEach(function(item) {
                        that.addOption(item);
                    });
                }
            };

            valueSetter =  function(rule, value) {
                rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
            }

JSON example

[{
    "value": "AnyRole",
    "arrayofobjs": [{
            "value": "firstobj"
        },
        {
            "value": "secondobj"
        }
    ]
},
{
    "value": "Administrator",
    "arrayofobjs": [{
            "value": "firstobj"
        },
        {
            "value": "secondobj"
        }
    ]
}]

Considering the json sample above, I would like to search inside arrayofobjs when typing the . notation after an option of object values as shown below.

a
 AnyRole
 Administrator
 Manager

and when selecting f.e 'Administrator' and type the dot notation

Administrator.
             firstobj
             secondobj

The same way editors do with objects.

Is there anything out of the box? I have searched in the selectize.js examples as well as into other threads on GitHub but did not find anything related to it. In case there is not any, I could make a custom solution myself but it would be great if anyone gives me any tips on which part of code and what should I do, thanks in advance :)

0 Answers
Related