Why is Symfony UX-Autocomplete not working here?

Question

My form works but auto-complete does not.

Anyone has an idea of what could be wrong?

Thanks and sorry for my english!

• I tried adding "autocomplete" attribute:

<?php

namespace App\Form;

use App\Entity\Category;
use App\Entity\City;
use App\Entity\Location;
use App\Entity\User;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('username', TextType::class,[
                'label'=>'Pseudo'
            ])
            [...]

           ->add('city', EntityType::class,[
                'class'=>City::class,
                'choice_label'=>'name',
                'label'=>'Ville',
                'placeholder'=>'Selectionnez votre ville',
                **'autocomplete'=>true**
           ]
          )
          ;
    }

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

As a result, my form still works, but there is no autocomplete:

• I tried using AutocompleteField instead:

**->add('city',CityAutocompleteField::class)**

<?php

namespace App\Form;

use App\Entity\City;
use App\Repository\CityRepository;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\UX\Autocomplete\Form\AsEntityAutocompleteField;
use Symfony\UX\Autocomplete\Form\ParentEntityAutocompleteType;

#[AsEntityAutocompleteField]
class CityAutocompleteField extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'class'=>City::class,
            'choice_label'=>'name',
            'placeholder'=>'Saisissez',

            'query_builder' => function(CityRepository $cityRepository) {
                return $cityRepository->createQueryBuilder('city');
            },
            //'security' => 'ROLE_SOMETHING',
        ]);
    }

    public function getParent(): string
    {
        return ParentEntityAutocompleteType::class;
    }
}

The result is différent. I have the value stored in my database, but that's all. I can't select another value:

I followed the instructions given here( https://symfony.com/bundles/ux-autocomplete/current/index.html ), but don't why it is not ok here.

code in my browser:

`<select id="looking_for_city" name="looking_for[city]" required="required" data-controller="symfony--ux-autocomplete--autocomplete" data-symfony--ux-autocomplete--autocomplete-no-results-found-text-value="No results found" data-symfony--ux-autocomplete--autocomplete-no-more-results-text-value="No more results"><option value="" selected="selected">Selectionnez votre ville</option><option value="25000">Boudes(63)</option><option value="25001">La Bourboule(63)</option>...<option value="35853">Île de Clipperton(989)</option></select>`

controller.json:

{
    "controllers": {
        "@symfony/ux-autocomplete": {
            "autocomplete": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "tom-select/dist/css/tom-select.default.css": true
                }
            }
        }
    },
    "entrypoints": []
}

composer.json:

{
    "type": "project",
    "license": "proprietary",
    "minimum-stability": "stable",
    "prefer-stable": true,
    "require": {
        "php": ">=8.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "beberlei/doctrineextensions": "^1.3",
        "doctrine/annotations": "^1.0",
        "doctrine/doctrine-bundle": "^2.7",
        "doctrine/doctrine-migrations-bundle": "^3.2",
        "doctrine/orm": "^2.13",
        "knplabs/knp-paginator-bundle": "^5.9",
        "phpdocumentor/reflection-docblock": "^5.3",
        "phpstan/phpdoc-parser": "^1.8",
        "sensio/framework-extra-bundle": "^6.1",
        "symfony/apache-pack": "^1.0",
        "symfony/asset": "5.4.*",
        "symfony/console": "5.4.*",
        "symfony/doctrine-messenger": "5.4.*",
        "symfony/dotenv": "5.4.*",
        "symfony/expression-language": "5.4.*",
        "symfony/flex": "^1.17|^2",
        "symfony/form": "5.4.*",
        "symfony/framework-bundle": "5.4.*",
        "symfony/http-client": "5.4.*",
        "symfony/intl": "5.4.*",
        "symfony/mailer": "5.4.*",
        "symfony/mime": "5.4.*",
        "symfony/monolog-bundle": "^3.0",
        "symfony/notifier": "5.4.*",
        "symfony/process": "5.4.*",
        "symfony/property-access": "5.4.*",
        "symfony/property-info": "5.4.*",
        "symfony/proxy-manager-bridge": "5.4.*",
        "symfony/runtime": "5.4.*",
        "symfony/security-bundle": "5.4.*",
        "symfony/serializer": "5.4.*",
        "symfony/string": "5.4.*",
        "symfony/translation": "5.4.*",
        "symfony/twig-bundle": "5.4.*",
        "symfony/ux-autocomplete": "^2.4",
        "symfony/validator": "5.4.*",
        "symfony/web-link": "5.4.*",
        "symfony/webpack-encore-bundle": "^1.16",
        "symfony/yaml": "5.4.*",
        "twig/extra-bundle": "^2.12|^3.0",
        "twig/twig": "^2.12|^3.0"
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4",
        "fakerphp/faker": "^1.20",
        "phpunit/phpunit": "^9.5",
        "symfony/browser-kit": "5.4.*",
        "symfony/css-selector": "5.4.*",
        "symfony/debug-bundle": "5.4.*",
        "symfony/maker-bundle": "^1.0",
        "symfony/phpunit-bridge": "^6.1",
        "symfony/stopwatch": "5.4.*",
        "symfony/web-profiler-bundle": "5.4.*"
    },
    "config": {
        "allow-plugins": {
            "composer/package-versions-deprecated": true,
            "symfony/flex": true,
            "symfony/runtime": true
        },
        "optimize-autoloader": true,
        "preferred-install": {
            "*": "dist"
        },
        "sort-packages": true
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "App\\Tests\\": "tests/"
        }
    },
    "replace": {
        "symfony/polyfill-ctype": "*",
        "symfony/polyfill-iconv": "*",
        "symfony/polyfill-php72": "*"
    },
    "scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
            "assets:install %PUBLIC_DIR%": "symfony-cmd"
        },
        "post-install-cmd": [
            "@auto-scripts"
        ],
        "post-update-cmd": [
            "@auto-scripts"
        ]
    },
    "conflict": {
        "symfony/symfony": "*"
    },
    "extra": {
        "symfony": {
            "allow-contrib": false,
            "require": "5.4.*"
        }
    }
}

package.json:

{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.2.0",
        "@symfony/ux-autocomplete": "file:vendor/symfony/ux-autocomplete/assets",
        "@symfony/webpack-encore": "^4.0.0",
        "core-js": "^3.23.0",
        "regenerator-runtime": "^0.13.9",
        "tom-select": "^2.0.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-notifier": "^1.15.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

Answer 1

In my case the bootstrap.js file was not imported in one of my javascript files. I am not talking about the Bootstrap library, but the bootstrap.js which is created by Symfony, under assets directory

Check that if you correctly import it in one of your files:

import "../bootstrap.js";

Answer 2

I had the same problem, or at least it was very similar. I solved it by adding the following code before </head> in templates\base.html.twig:

<!--Symfony UX -->
{{ encore_entry_link_tags('app') }}
{{ encore_entry_script_tags('app') }}

I hope this helps.