List of checkboxes Symfony 4

Question

I'm new to Symfony 4 and I'm trying to create a list of checkboxes with a searcher in the following situation:

I have an entity called SAI, and this entity may be "owned" by many users (so, I have an entity called User).
I have a controller AddSAIController.php where I manage how to add a SAI. And when I add it, I want to display a form in which the user can enter the serial_number of the SAI and can check what users own that SAI. The problem is that I will have a lot of users in the database and I would need a searcher to find faster the users I want.

First of all I tried to create the list of checkboxes following the documentation at https://symfony.com/doc/current/form/form_collections.html, I have managed to get to show the users, but not with checkboxes as I wanted, instead, it shows them like a input text type. Like this.
This is my code:

add_sais.html.twig

{%  block body %}

<div class="main">
    <h1>Add SAI</h1>
    <hr>
    <div class="formUsers">
        {{ form_start(form) }}
        {% for user in form.users %}
            {{ form_row(user.username) }}
        {% endfor %}
        {{ form_end(form) }}
    </div>
</div>

{%  endblock %}

AddSAIsController.php

public function addSAI(Request $request)
{
    $sai = new SAI();
    $users = $this->getDoctrine()->getRepository(User::class)->findAll();
    $sai->setUsers($users); 
    $form = $this->createForm(SAIType::class,$sai);
    $form->handleRequest($request);

    return $this->render('management/add_sais.html.twig', array(
        'form' => $form->createView(),
    ));
}

UsersType.php

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('username');
}

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => User::class,
    ));
}

SAIType.php

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('serial_number');
    $builder->add('users', CollectionType::class, array(
        'entry_type' => UsersType::class,
        'entry_options' => array('label' => false),
    ));
}

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => SAI::class,
    ));
}

For now I would be happy with some help to create the checkboxes, I will do the seracher later.

Answer 1

What you could do to have a multiple selector and a search function in one is use a jQuery selectbox plugin, for example Select2. This gives you a select field where you can search and have multiple inputs. Try this:

SAIType.php

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('serial_number')
            ->add('users', EntityType::class, array(
                'label' => false,
                'class' => User::class,
                'multiple' => true,
                'attr' => ['data-select' => 'true']
    ));
}

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => SAI::class,
    ));
}

Then on the page you want to use it (or just put it in base.html.twig):

CSS

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
    $('select[data-select="true"]').select2({});
</script>