Example of using select2 library instead of select or autocomplete

asle

I have a need for a select field that is both autocomplete and multiple select and I understand that the select2 library is very good. It seems I an better oontrol the height of the select also (?) with selec2. But I can't find any good examples of setting this up, only this:
https://editor.datatables.net/plug-ins/field-type/editor.select2

I am trying to set this up and I have a test page. When I choose "New" I can not type anything, I can only select from the list. I am trying to accomplish autocomplete also on the field When I edit a record i get the value.
Here is a test page
If I could look at some working solution with select2 and Datatables it would help me.

kthorngren

For some reason the input for this field doesn't look like a select2 input:

        {
            label: 'Tiltakstype:',
            name: 'publikasjon.tiltakstype',
            type: 'select2',
            opts: {
                placeholder: "Velg eller skriv tiltakstype...",
                tags: true,
                allowClear: true,
                width: 'resolve'
            }
        },

Looks like you might be using an old version for the Editor's select2 plugin. Try the latest version from here.

Kevin

allan

To add to that, there isn't currently an online demo for Select2 with Editor I'm afraid. I've focused instead on the built in tags and autocomplete field types which can do nearly everything required for a Select2 like field and are fully integrated into Editor and the backend libraries.

Allan

rf1234

Hi asle,

if you use the plug-in version that Kevin recommends everything should work. Here is the link again:
https://editor.datatables.net/plug-ins/field-type/editor.select2

I use exactly those versions for Select2:

I copied your settings into my code:

editor
    .on('opened', function (e, mode, action) {   
        if ( action === "remove" || action === "edit" ) {
            return true; //we can stop here for edit and remove
        }
        //must be reinitialized: not working otherwise!!
         $( this.field("report.report_type_id").input() ).select2("destroy").select2({
            placeholder: lang === 'de' ? 'Bitte wählen Sie einen Berichtstyp' : 
                                         'Please select one report type',
            tags: true,
            allowClear: true,
            width: 'resolve'
            });

For some reason I need to reinitialize my select2 field on "opened" - otherwise: not working. But maybe that's caused by dynamically adding the optgroups in a fairly unorthodox way?!

I tried the code above. And it gives you the search field etc. I don't see any effect of "tags", "allowClear" and "width" but I think it works well.