How customize display data in Sonata autocomplete

Question

I use form field sonata_type_model_autocomplete and i want customize display. I want to get autocompleteas in the pictures:

Do I understand correctly that the only way to do this is to override the block sonata_type_model_autocomplete_selection_format in template SonataAdminBundle:Form/Type:sonata_type_model_autocomplete.html.twig? How in documentation. Next I have to create a custom controller that will give me the necessary data and fill route option. Perhaps like this.

Is there no a simple and ready-made solution?

Answer 1

I found a solution.

With option to_string_callback can be used, and as a result give not a single field of record, and render template.

class DemoAdmin extends Admin
{
    protected function configureFormFields(FormMapper $formMapper)
    {
        $templating = $this->templating;
        $formMapper
            ->add('movie', 'sonata_type_model_autocomplete', [
                'property' => 'title',
                'label' => 'Movie',
                'multiple' => false,
                'required' => false,
                'container_css_class' => 'select2-image',
                'to_string_callback' => function($entity, $property) use ($templating) {
                    return $templating->render(
                        'AcmeDemoBundle:Form/Type/sonata_type_model_autocomplete:movie.html.twig',
                        ['entity' => $entity]
                    );
                },
            ]);
    }
}

Template code:

{% spaceless %}
    <div class="select2-image__autocomplete">
        <img
            src="{{ entity.webPath | apply_filter('autocomplete') }}"
            class="select2-image__image"
            alt="{{ entity.title }}"
        />
        <strong>{{ entity.title }}</strong>
        <div>{{ entity.announce }}</div>
    </div>
{% endspaceless %}

config.yml

avalanche_imagine:
    filters:
        autocomplete:
            type: thumbnail
            options: { size: [60, 60], mode: outbound }

SCSS

.select2-image {
  height: auto;
  .select2-choice {
    height: 72px; // height 60 + 12 padding
  }
  &__autocomplete {
    clear: both;
    height: 60px;
  }
  &__image {
    float: left;
    margin-right: 5px;
    width: 60px;
    height: 60px;
  }
}

Result