issue with select2

i have been trying to use the select2 form type, the problem is that additional options like "maximumSelectionLength" wont work
$fields['states'] = array('type' => 'select2', 'maximumSelectionLength'=>5,'maximumInputLength'=>3);
it outputs the select2 but the maximumSelectionLength does not take effect.
any help please


  • edited October 2019

    Does it work if you attach data attributes to the element like in the following:

    $fields['states'] = array('type' => 'select2', 'data' => array('maximum-selection-length' => 5, 'maximum-input-length'=>3));
  • Sorry for the delayed response, Let me give that a try

  • edited October 2019

    Thanks for the code but I tried it and it still did not work.
    $fields['states'] = array('type' => 'select2', 'data' => array('maximum-selection-length' => 2, 'maximum-input-length'=>3));

  • Another thing you could try is adding the following to the fuel/application/config/custom_fields.php to overwrite the existing configuration for the select2 custom field:

    $fields['select2'] = array(
        'class'     => array(FUEL_FOLDER => 'Fuel_custom_fields'),
        'function'  => 'select2',
        'js' => array(
            FUEL_FOLDER => array(
        'js_exec_order' => 1,
        'js_function' => 'fuel.fields.select2',
            'js_params' => array('maximumSelectionLength' => 5, 'maximumInputLength' => 3),
        'css' => array(
            FUEL_FOLDER => array(

    Note the js_params addition to the configuration. That gets converted to a JSON object which gets passed to the select2 as a configuration object in the custom_fields.js select2 function.

  • Is it possible to add js_param from field definition in the model or the block directly?
    I'd like to use select2 with an ajax request.

  • Not at this time. It's only within the definition of the field type. However, a new field type could probably be created that has maximumSelectionLength and maximumInputLength as field parameters. The function could be modeled off the Fuel_custom_fields::select2 method that would allow for those parameters to be passed (THIS IS REALLY ROUGH UNTESTED CODE):

    public function select2($params = array())
        $form_builder =& $params['instance'];
        if (empty($params['width']))
            $params['width'] = '225px';
        $params['style'] = (!empty($params['style'])) ? $params['style'].'; width: '.$params['width'] : 'width: '.$params['width'];
        $params['class'] = (!empty($params['class'])) ? $params['class'].' select2' : 'select2';
        $params['mode'] = 'multi';
        $select2_params = array(
            'maximumSelectionLength' => $params['maximum_selection_length'],
            'maximumInputLength' => $params['maximum_input_length'],
        $params['data'] = array('options' => json_encode($select2_params));
        return $this->inline_edit($params);
            //return $form_builder->create_select($params);

    And then in then in a similar javascript function as one found in the custom_fields.js fuel.fields.select2 javascript function, you would add in those as options perhaps using the data-options passed to the form element:

    fuel.fields.select2 = function(context, options){
        if (options){
            var options = $.extend({}, options, );
        } else { 
            options = {};
        $('select.select2_applied', context).select2('destroy').removeClass('select2_applied');
        $('select.select2', context).each(function(){
            options = $.extend(options, JSON.parse($(this).data('options')));
            $('select.select2', context).addClass('select2_applied').select2(options);

    Again, this is me riffing here and rough code, but hopefully to give you an idea of how it could be modified. If you get it working and think it would be a good update to FUEL, let me know and send a pull request.

  • Thanks for some input, that might makes some things easier or keep some config in the right place. I'll check it out.

    I made a gist with a working approach (it's quite messy, but people who understand Fuel should be able to follow)

    I got it working with Select2 v3 the current version in fuel - but it didn't work well with the inline edit buttons. (Select2 v3 needs a hidden form field for the ajax stuff, instead of select and that throws off the fuel inline edit implementation.)

    With Select2 v4 seems to work ok. I completely overwrite the select2 field to use v4 everywhere. So it works seamless.

    Right now I'm just evaluating my options, so it's not thought through and I don't feel comfortable to send those pull requests ;-).

    Where I'm struggling right now is that the Select2 fields are not getting rendered if they are in a Block Layout Field and initially hidden. :/ But that's a different problem.

    Thanks. m.

Sign In or Register to comment.