Select2

Use the Select2 library with Editor for complex select input options.

Requires: Select2

Select2 is a replacement for HTML select elements, enhancing standard select's with searching, remote data sets and more. This plug-in provides the ability to use Select2 with Editor very easily.

Note for when using Select2's remote Ajax data source option: In order to have the label correctly render for an item being edited, the server-side script that is responding to the Select2 requests must be able to accept a request with the parameters: initialValue:true and value:... (i.e. the value). The server must respond with { "id": value, "text": "Label to show" }.

Plug-in configuration and API

Options

This field type supports the following options, in addition to the default field-options configuration:

object options: - The values and labels to be used in the Select2 list. This can be given in a number of different forms:
- object - Name / value pairs, where the property name is used as the label and the value as the field value. For example: { "Edinburgh": 51, "London": 76, ... }.
- array - An array of objects with the properties label and value defined. For example: [ { label: "Edinburgh", value: 51 }, { label: "London", value: 76 } ].
- array - An array of values (e.g. numbers, strings etc). Each element in the array will be used for both the label and the value. For example: [ "Edinburgh", "London" ].
object optionsPair: If options is given as an array of objects, by default Editor will read the information for the label and value properties of the select input from the label and value properties of the data source object. This option provides the ability to alter those parameters by giving it as an object containing the properties label andvalueitself, the values of which indicate the properties that should be read from the data source object. For example you might use{ label: 'name', value: 'id' }`.
object opts: Select2 initialisation options object. Please refer to the Select2 documentation for the full range of options available.
object attr: Attributes that are applied to the select element before Select2 is initialised
string - separator when the multiple and tags options are used for Select2 (opts parameter) this can be used to use a string value to represent the multiple values that are selected. The character given for this parameter is the separator character that will be used.
string - onFocus: Action to take when the Select2 field is focused. This can be open or undefined. If open the dropdown list will automatically show when the field is focused.

Methods

This field type supports the following methods, in addition to the default field() methods:

inst: Execute a Select2 method, using the arguments given. The return value is that returned by the Select2 method. For example you could use editor.field('priority').inst('val') to get the value from Select2 directly.
update: Update the list of options that are available in the Select2 list. This uses the same format as options for the initialisation.

License required

The Editor plug-ins are available to download for licensed users of Editor only. If you already have an Editor license, please sign-in. Otherwise, an Editor license can be purchased to be able to access the plug-ins.

Comments (5)

burnchar@v1.6.514:34, Mon 19th Feb 2018

If you want the user to be able to choose nothing, e.g. no value at all, Select2 is trickier than a standard select box, but is not difficult.

It doesn't seem possible to select an empty entry, nor will select2 display any entry with an empty value. Instead, the user must click the clear button, which as of this writing looks like an 'x' and appears only when "allowClear" is set to true.

Configure your editor fields as follows:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12 editor.add( {
    "label": "Make of automobile:",
    "name": "automake",
    "type": "select2",
    "opts": {
        "allowClear": true,
        "placeholder": {
            "id": "",
            "text":"(Does not own automobile)"
        }
    }
}

Next, make sure that your Options data (or other data that provides select options) includes a single entry whose value matches the value of "id". In the above example, I used an empty string, but you can use -1, "null", or whatever you like -- just make sure they match, are unique, and can't conflict with a valid entry.

In my particular case, the options part of the load JSON for my joined column FOO looks something like:

Javascript
1
2
3
4
5
6
7
8
9 "options":{
    "FOO":[
        {
            "label":"(This text does not matter. It is never displayed by Select2.)",
            "value":""
        }
    ],
    //other joined fields...
}

Bindrid2@v1.7.412:52, Mon 6th Aug 2018

Do to the dynamic nature of my data, I was using the update function from above to populate my select box inside the preOpen event handler.

However, the select2 set function was call before the preOpen was fired.
That meant that the current select value was lost since the select box was empty. The select2.get returned "".

My quick and dirty solution was to modify the select2 such that the original value was stored in the field object:

Javascript
1
2
3
4 ...
 set: function (conf, val) {
     conf._input.originalValue = val;
...

Then I added the nonstandard function:

Javascript
1
2
3 originalValue: function (conf) {
    return conf._input.originalValue;
},

So my event handler looks like:

Javascript
1
2
3
4
5
6
7
8
9
10 this.editor.on("preOpen", function (e, mode, action) {
    val = me.editor.field(me.fieldName).originalValue();
    var ce = sessionStorage.getItem(me.fieldName + "_DDList");
    if (ce) {
        ce = JSON.parse(ce);
        me.editor.field(me.fieldName).update(ce.dataSource);
    }
    me.editor.field(me.fieldName).val(val);
    return true;
});

I created a separate value because, after the select box was populated, the value still might not be valid so I need to force the user to select something else.

louking@v1.8.110:48, Fri 14th Dec 2018

If you're using Select2 with jQuery UI and you are having trouble typing into the searchbox, you might want to see this SO post.

mguinness@v1.8.122:09, Thu 14th Feb 2019

Presently when using ajax the url option only supports a string, but a new release should support a dynamic url using a function. See the following question for further details:

select2 box with dynamic url

mguinness@v2.0.117:36, Tue 6th Apr 2021

If you have a need to style select options this can be achieved by using templateResult & templateSelection select2 options as shown in How to pass .

The only caveat is that when using this plugin the initial option is manually inserted without the ability to set the class. As discussed in Assigning class to option w/ Select2 plug-in you'll need to manually modify editor.select2.js to permit this.

If you find it useful please upvote that forum post so that code change can be integrated into the main branch.

Post new comment

Contributions in the form of tips, code snippets and suggestions for the above material are very welcome. To post a comment, please use the form below. Text is formatted by Markdown.

To post comments, please sign in to your DataTables account, or register:

Any questions posted here will be deleted without being published.
Please post questions in the Forums. Comments are moderated.