Why is Symfony UX-Autocomplete not working here? - symfony

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

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.