Search2 Select Object

[ajackson]

Hi,
It seems I'm unable to add items to the Select2 select object list, just select them.
I believe this funtionality is known as 'tagging', is it not available in nuBuilder?

Cheers,
Alan

[kev1n]

Hi Alan,

I found this on the official select2 documentation page:
https://select2.org/programmatic-contro ... lear-items

[ajackson]

Hi Kevin,

Yes, I've tried that but could not get it to work, the object just disappeared in nuBuilder.
I'm wondering whether you can actually just use the nuBuilder object names or some other extra syntax is required.
I couldn't really find which naminig convention to use from the F12 developer option.

[kev1n]

Just use the nuBuilder object id. It works for me:

2024-06-14_162855.png

[ajackson]

That also works for me...
It was the dynamic option creation that I couldn't see how to implement:
https://select2.org/tagging

[kev1n]

To enable tags for Select2 objects, use the PHP BE event. You can use the following code snippets.

Enable tags for all Select2 objects on a form:

Code: Select all

$js = "
window.nuOnSetSelect2Options = function(id, objSelect2OptionsDefault) {
    // Customize Select2 options here 
    let customOptions = {
        tags: true  // This enables tags mode in Select2
    };
    return customOptions;
};
";
nuAddJavaScript($js, true, true);

Enable tags for a specific Select2 object with ID "mySelectObjectId":

Code: Select all

$js = "
window.nuOnSetSelect2Options = function(id, objSelect2OptionsDefault) {
    if (id === 'mySelectObjectId') {
        let customOptions = {
            tags: true
        };
        return customOptions;
    }
    return {};
};
";
nuAddJavaScript($js, true, true);

Replace `'mySelectObjectId'` with the actual ID of your Select2 object to apply tags only to that specific instance.

[ajackson]

Hi Kevin,
Great, this works!
I definitely would not have got there by myself!
Is there any documentation regarding this and similar options... or perhaps I need to be more knowledgeable about Javascript?

Cheers,
Alan

[kev1n]

All available config options are documented here: https://select2.org/configuration/options-api

However, the snippet I posted (esp. window.nuOnSetSelect2Options) is not documented yet.