Select2 with Symfony with custom tags

Question

The senario I have is that I want a select2 dropdown which allows users to select multiple options. But when they select an option I want to have the selectbar to show an abbreviation of the selected item. Right now I have an key value array where the key is the abbreviation and the value is the full-text.

Right now I can't find a way of getting the "original" key of my array when I select an option. Nor do I see anything that can relate to the key of the array.

Form class

 $builder->add('relations', ChoiceType::class, [
    'choices' => [
        'isp' => 'Internet service provider',
        'db' => 'Database'
    ]);

View

{{ form_row(form.relations) }}

Javascript

<script>
    $(document).ready(function() {
        $('#form_relations').select2({
            closeOnSelect : false,
            placeholder : "Placeholder",
            allowHtml: true,
            allowClear: true,
            multiple: true
        });
    });    
</script>

Right now it will simply use the value of the array when you select an option, however I'd like to use the abbreviation. I tried logging the selected options but this does not seem to contain the key of the array. I also tried looking into the array which symfony is returning to the view and it seems to replace the keys with an incremental index instead of keeping my own. Is there a way of making sure symfony will keep my own keys and use those when an option is being selected with select2JS?

Frank B Frank B · Accepted Answer · 2019-10-14T16:45:34

The solution should be to set an additional data-attribute to your options. To do this you should use an object to set your choices. So let's add a new Option class first:

namespace App\Model;

class MyOption 
{
    private $name;
    private $abbreviation;

    public function __construct($name, $abbreviation) {
        $this->name = $name;
        $this->abbreviation = $abbreviation;
    }

    function getName() {
        return $this->name;
    }

    function getAbbreviation() {
        return $this->abbreviation;
    }
}

Now create your dropdown in your formType like this:

use App\Model\MyOption;

public function buildForm(FormBuilderInterface $builder, array $options) 
{
    $builder->add('relations', ChoiceType::class, [
        'choices' => [
            new MyOption('Internet service provider', 'isp'),
            new MyOption('Database', 'db'),
        ],
        'choice_label' => function(MyOption $option, $key, $value) {
            return $option->getName();
        },
        'choice_attr' => function(MyOption $option, $key, $value) {
            return ['data-abbreviation' => $option->getAbbreviation()];
        },
    ]);

}

The result would be something like:

<select id="product_option_relations" name="product_option[relations]">
    <option value="0" data-abbreviation="isp">Internet service provider</option>
    <option value="1" data-abbreviation="db">Database</option>
</select>

Next you will be able to get the selected abbreviation with for example jQuery:

$("#product_option_relations").find(':selected').data('abbreviation');

Select2 with Symfony with custom tags

Form class

View

Javascript

1 Answers