Modification of selectize plug in to update options dynamically

rf1234 · July 23

I have long been unhappy about the selectize plug in because I was dissatisfied with updating the options. The update didn't work if the selectize field had a value that was not included in the new options. The expected behavior would have been that selectize clears the field contents because it is no longer part of the options and subsequently loads the new options. But that didn't happen: The field contents wasn't cleared and the options weren't replaced either.

My work around was to clear() the field from Editor and than add() the field back into Editor with the new options. That was cumbersome, inflated my code, destroyed all the dependencies I had attached to the field previously and created unnecessary change events. Not nice.

My solution below:
- checks whether the current field value exists in the new options
- if not: the field value is cleared
- finally the options are update with the new options

Here is the current plugin:
https://editor.datatables.net/plug-ins/field-type/editor.selectize

I replaced this:

update: function ( conf, options ) {
    _fieldTypes.selectize._addOptions( conf, options );
},

with this new code:

update: function ( conf, options ) {
    var currentValue = _fieldTypes.selectize.get( conf );
    var valueExists = options.some(function(opt) {
        return opt.value === currentValue;
    });
    if (! valueExists) {
        _fieldTypes.selectize.clear( conf );
    }
    _fieldTypes.selectize._addOptions( conf, options );
},

clear: function( conf ) {
    var selectize = conf._selectize;

    selectize.clear(true);  // 'true' silent flag prevents unnecessary change events
}

rf1234 · July 24

Another improvement I made yesterday is the ability to use synonyms for search terms. Instead of passing an array of label - value pairs I pass label - value - synonyms (array) triplets. The synonyms are optional. If you don't pass them: no problem.

I changed the plugin code like this:

create: function ( conf ) {
        var container = $('<div/>');
        conf._input = $('<select/>')
                .attr( $.extend( {
                    id: conf.id
                }, conf.attr || {} ) )
            .appendTo( container );
 
        conf._input.selectize( $.extend( {
            valueField: 'value',
            labelField: 'label',
//        change
//            searchField: 'label',
            searchField: ['label', 'synonyms'],
//        end change 
            dropdownParent: 'body'
        }, conf.opts ) );

In my CMS the user can maintain the synonyms as comma separated values.

When I read the options I read the triplet above and convert the "synonyms" string to an array of trimmed "synonyms" using PHP like this:

foreach ($row as $key => $val) {
    $row[$key]["synonyms"] = array_map('trim', explode( ",", $row[$key]["synonyms"] ));
}

That creates the array of synonyms to be passed to selectize

allan · July 24

Hi @rf1234,

That's super - thank you very much for sharing this. I'm never been quite satisfied with the Selectize integration with Editor either (with the autocomplete and tags field types, I haven't really focused on it though), but that is a great addition. I'm sure others using Selectize will appreciate it and I'll look at integrating it into the plugin.

Allan

Modification of selectize plug in to update options dynamically

Modification of selectize plug in to update options dynamically

Replies