Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

The Autocomplete Field

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $8.00

EasyAdminBundle re-uses all the form stuff... but also comes with one new form field... and it's pretty bananas! From the main documentation page, click Edit and New Views Configuration. Down a ways, find a section called "Autocomplete". Ah, lovely! This is a lot like the EntityType... except that it renders as a fancy AJAX auto-complete box instead of a select drop down.

Right now, the subFamily field is a standard EntityType. But, it doesn't look that way at first... it's fancy! And has a search! We get this automatically thanks to some JavaScript added by EasyAdminBundle. It works wonderfully... as long as your drop down list is short. Because if there were hundreds or thousands of sub families... then all of them would need to be rendered on page load... which will really slow - or even break - your page.

Let's use the autocomplete field instead. Expand the subFamily configuration and set type: easyadmin_autocomplete:

... lines 1 - 80
easy_admin:
... lines 82 - 91
entities:
Genus:
... lines 94 - 114
form:
fields:
... lines 117 - 124
- { property: 'subFamily', type: 'easyadmin_autocomplete' }
... lines 126 - 138

That is all we need: it will look at the subFamily field and know which entity to query. So.... it just works! Watch the web debug toolbar as a I type. Ha! There be AJAX happening!

Next, let's add a CollectionType to our form.

Leave a comment!

6
Login or Register to join the conversation
Courtney-T Avatar
Courtney-T Avatar Courtney-T | posted 5 months ago

Is this autocomplete configuration still valid for EasyAdmin 4, or is there a better way to do it? I'm trying to use a collection type field because I like how it creates an extra field per item, but I need it to be able to autocomplete as I have a lot of items.

Reply

Hey @Courtney-T ,

Sure! Autocomplete field also exists in the newest EA version, I think that field os much loved by users that it's the most important field in EA :D We have a separate tutorial about a newer EA version, you can see the whole course here: https://symfonycasts.com/screencast/easyadminbundle . And what specific to autocomplete field, you can check it out here: https://symfonycasts.com/screencast/easyadminbundle/association-autocomplete

Cheers!

Reply
Philippe G. Avatar
Philippe G. Avatar Philippe G. | posted 4 years ago

The Dropdown or autocomplete doesn't close when I used them. Do you have any idea?

Reply

Hey Philippe G.

Do you get any error logs on your console? We need to debug this a bit further

Cheers!

Reply
Dennis E. Avatar
Dennis E. Avatar Dennis E. | posted 5 years ago

Hi Ryan, I get an error : "The required option "class" is missing.". I've googled this problem, and it happens when you do not have a __toString() method in your entity, but I do have that.

Do you have any clue why this may happen?

My code in config.yml: "- { property: 'createdBy', type: 'easyadmin_autocomplete' }"

Best regards,
Dennis

Reply

Hey Dennis,

Hm, if exactly this line causes that error - how is this createdBy field mapped in your code? I see we don't have such field :) I assume that createdBy is a User object, and you need to have a __toString() method in the User class, not in Genus. Otherwise, specify the "class" option explicitly.

Cheers!

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

This tutorial is built on an older version of Symfony & EasyAdminBundle. Many of the concepts are the same, but you can expect major differences in newer versions.

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=5.5.9",
        "symfony/symfony": "3.3.*", // v3.3.18
        "doctrine/orm": "^2.5", // v2.7.2
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.5
        "symfony/swiftmailer-bundle": "^2.3", // v2.6.7
        "symfony/monolog-bundle": "^2.8", // v2.12.1
        "symfony/polyfill-apcu": "^1.0", // v1.17.0
        "sensio/distribution-bundle": "^5.0", // v5.0.25
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.29
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.4
        "knplabs/knp-markdown-bundle": "^1.4", // 1.7.1
        "doctrine/doctrine-migrations-bundle": "^1.1", // v1.3.2
        "stof/doctrine-extensions-bundle": "^1.2", // v1.3.0
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "javiereguiluz/easyadmin-bundle": "^1.16" // v1.17.21
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.7
        "symfony/phpunit-bridge": "^3.0", // v3.4.40
        "nelmio/alice": "^2.1", // v2.3.5
        "doctrine/doctrine-fixtures-bundle": "^2.3" // v2.4.1
    }
}
userVoice